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

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Basic html (20)

Recently uploaded (20)

Basic html