Basic html

Basic <HTML>
from w3school lessons
by Niciuzza, nicha.in.th

Hyper Text Markup Language
=
HTML
BASIC HTML for Web Designer by Niciuzza, nicha.in.th

<!DOCTYPE html>
<head>
</head>
<body>
<div class="wrapper">
<header id="logocompany">
<h1 id="wegetlogo"><a href="" title="
WeGetHosting.com"><img src="img/logo.png" alt="
WeGetHosting.com"></a></h1>
</header>
.....
</div>
</body>
</html>
HTML is a markup language

HTML is a markup language

HTML
have many many
TAGS

<tagname>content</tagname>
TAGs
are usually place inside
<Angle Brackets>

a TAG means a type of content
<p> = Paragraph
<a> = Anchor Link
<h1> = Header 1

HTML documents
contain
TAGs & TEXTs

HTML documents
is
Web Page

<!DOCTYPE html>
<head>
</head>
<body>
<div class="wrapper">
<header id="
logocompany">
<h1 id="logo"><a
href="" title="P&THosting.com"
><img src="img/logo.png" alt="
WeGetHosting.com"></a></h1>
</header>
.....
</div>
</body>
</html>

HTML page structure
<html>
</html>
<body>
</body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML
HTML Versions
1991
1993
1995
1997
1999
2000
2012
2013

<!DOCTYPE>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
XHTML 1.0
<!DOCTYPE html>
HTML5

HTML Tags You Must Know
● Headings
● Paragraphs
● Link
● Image
<h1>This is Heading</h1>
<p>This is Paragraph</p>
<a href="http://nicha.in.th">This is a link</a>
<img src="w3schools.jpg" width="104" height="142">

<p>Hello World</p>
open TAG
Content
close TAG
HTML Elements

HTML Element Syntax
<a href="default.htm">This is a
link</a>
<img src="w3schools.jpg" width="104"
height="142" />

HTML Element Nested
<html>
</html>
<body>
</body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Attributes
<a href="nicha.in.th">This is a link</a>
href = a attribute of <a>
Attributes Value should be inside "Double Quote" or 'Single Quote'.
But Double Quote is Recommended.

HTML Attributes
<img src="pic.jpg" width="104" height="142">
One Tag may have many attributes

HTML Attributes
that can use in any tags
class: Specifies one or more classnames for an element
id: Specifies a unique id for an element
style: Specifies an inline CSS style for an element
title: Specifies extra information about an element (displayed as a tool
tip)

<h1>HTMl H1 Heading</h1>
<h2>HTML H2 Heading</h2>
HTML Heading
HTMl H1 Heading
HTML H2 Heading
HTML H3 Heading
HTML H4 Heading
HTML H5 Heading
HTML H6 Heading
● Don't use Heading for Bold or Big text.
● Use them as a hierarchy.

HTML Comments
● Comments make code more readable and understandable.
● Comments are ignored by the browser and are not displayed.

<p>This is a paragraph.
Tincidunt pellentesque
ridiculus, dignissim nec!
Tincidunt et proin porttitor?
Augue ac cras! Integer augue
sit turpis magna et dolor
cras.</p>
HTML Paragraphs
Line Break. <br>
This is a paragraph. Tincidunt
pellentesque ridiculus, dignissim nec!
Tincidunt et proin porttitor? Augue ac
cras! Integer augue sit turpis magna et
dolor cras.
<p>This is a paragraph.<br>
Tincidunt pellentesque
ridiculus, dignissim nec!<br>
<br> Augue ac cras! Integer
augue sit turpis magna et
dolor cras.</p>
This is a paragraph.
Tincidunt pellentesque ridiculus,
dignissim nec!
Augue ac cras! Integer augue sit turpis
magna et dolor cras.

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
HTML Text Formatting
This text is bold
This text is strong
This text is italic
This text is emphasized

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
HTML Text Formatting
● Many Browsers Often renders <strong> as <b>, and <em> as <i>.
● <strong>, <em> mean "Important".
● <b>, <i> defines bold or italic text only.
Ref: http://www.w3schools.com/html/html_formatting.asp

<a href="url">Link text</a>
HTML Links
● <a> defines a hyperlink.
● Hyperlink is a word, group of words, or image that you
can click on to jump to another document.
Link text

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <head>&<title>
● <head> instruct the browser where to find style sheets, provide meta
information, and more.
● <title> defines the title of the document.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <link>,<style>
Ref: http://www.w3schools.com/html/html_head.asp
● <link> instruct the browser where to find style sheets or script.
● <style> is used to define style information for an HTML document
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

<img src="picture_url" alt="some_text">
HTML Images
Ref: http://www.w3schools.com/html/html_images.asp
<img> is empty, it contains attributes only and no closing tag.
<img> Attributes
● src = source (of image)
● alt = alternate text for an image, This text will show when image doesn't
display.
● width = width of image
● height = height of image

<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
HTML Table
● A table is divided into rows with <tr> ("table row").
● each row is divided into data cells with <td> ("table data") and contain
the data of the table which can be text, links, images, lists, forms, other
tables, etc.

<table border="1" cellpadding="10"
>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
HTML Table Attribute
Ref: http://www.w3schools.com/html/html_tables.asp
● border = border of the table
● cellspacing = space between each cells
● cellpadding = space inside each cells
<table border="1" cellspacing="10"
>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>

HTML Order Lists
Ref: http://www.w3schools.com/html/html_lists.asp
● <ol> is defined as order list.
● <li> is under <ol>, defined as each list item.
<ol>
<li>The first list item </li>
<li>The second list item </li>
<li>The third list item </li>
</ol>

HTML Unorder Lists
● <ul> is defined as Unorder List.
● <li> is under <ul>, defined as each list item.
<ul>
<li>The first list item </li>
<li>The second list item </li>
<li>The third list item </li>
</ul>

HTML Description Lists
● <dl> is defined as Description List.
● <dt> is under <dl>, defined as terms/names.
● <dd> is defined as description of each term/name.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

HTML Nested Lists
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

HTML Block Element
Ref: http://www.w3schools.com/html/html_blocks.asp
● Block level elements normally start (and end) with a
new line.
● Examples: <h1>, <p>, <ul>, <table>, etc.

HTML Inline Element
● Inline elements are normally displayed without
starting a new line.
● Examples: <b>, <td>, <a>, <img>

HTML <div>
● <div> is Block Elements.
● <div> is used as a container for grouping other HTML
elements.
● <div> is used for creating layout of web instead of
using <table>

HTML <span>
● <span> is Inline Elements.
● <span> is used as a container for text.

HTML Table layouts
Ref: http://www.w3schools.com/html/html_layout.asp
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>HTML<br>CSS<br>JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>

HTML Table layouts

HTML Table layouts
● Table layout is the old way to create layout of web
● Tables were designed for presenting tabular data -
NOT as a layout tool!

HTML Layouts with <div>
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>HTML<br>CSS<br>JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:
left;">Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>

HTML Layouts with <div>

HTML Forms and Inputs
Ref: http://www.w3schools.com/html/html_forms.asp
● <form> are used to pass data to a server.
● <input> is used to select user information.
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

● Text Field : <input type="text"> defines a one-line input field that a user
can enter text into.
name: <input type="text" name="name"
>
● Password : <input type="password"> defines a password field
Password: <input type="password"
name="pwd">

● Radio Button : <input type="radio"> that let a user select ONLY ONE of
a limited number of choices.
<input type="radio" name="sex" value="male"
>Male<br>
<input type="radio" name="sex" value="
female">Female
● Checkbox : <input type="password"> that let a user select ZERO or
MORE options of a limited number of choices.
<input type="checkbox" name="vehicle"
value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle"
value="Car">I have a car

● Submit : <input type="submit"> is used to send form data to a server.
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

HTML Color Values
Ref: http://www.w3schools.com/html/html_colors.asp
● HTML using a hexadecimal notation (HEX) for the combination of Red,
Green, and Blue color values (RGB).

HTML Color Values
Ref: http://www.w3schools.com/html/html_colornames.asp
● 141 color names are defined in the HTML and CSS color specification (17
standard colors plus 124 more)
● The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

HTML Entities
Ref: http://www.w3schools.com/tags/ref_entities.asp

HTML Quick List
Ref: http://www.w3schools.com/html/html_quick.asp

Enjoy
and
May HTML be with You.

Basic html

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Basic html

Similar to Basic html (20)

Recently uploaded

Recently uploaded (20)

Basic html