2. Hyper Text Markup Language
=
HTML
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
3. <!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
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
4. HTML is a markup language
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
10. BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<!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>
11. HTML page structure
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<html>
</html>
<body>
</body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
13. <!DOCTYPE>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<!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
14. HTML Tags You Must Know
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
● 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">
16. HTML Element Syntax
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<a href="default.htm">This is a
link</a>
<img src="w3schools.jpg" width="104"
height="142" />
17. HTML Element Nested
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<html>
</html>
<body>
</body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
18. HTML Attributes
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<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.
19. HTML Attributes
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
<img src="pic.jpg" width="104" height="142">
One Tag may have many attributes
20. HTML Attributes
that can use in any tags
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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)
21. <h1>HTMl H1 Heading</h1>
<h2>HTML H2 Heading</h2>
<h3>HTML H3 Heading</h3>
<h4>HTML H4 Heading</h4>
<h5>HTML H5 Heading</h5>
<h6>HTML H6 Heading</h6>
HTML Heading
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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.
22. <!-- This is a comment -->
HTML Comments
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
● Comments make code more readable and understandable.
● Comments are ignored by the browser and are not displayed.
23. <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
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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>
Tincidunt et proin porttitor?
<br> Augue ac cras! Integer
augue sit turpis magna et
dolor cras.</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.
24. <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
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
This text is bold
This text is strong
This text is italic
This text is emphasized
25. <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
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
● 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
26. <a href="url">Link text</a>
HTML Links
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
● <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
27. <!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <head>&<title>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
● <head> instruct the browser where to find style sheets, provide meta
information, and more.
● <title> defines the title of the document.
28. <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
HTML <link>,<style>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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>
29. <img src="picture_url" alt="some_text">
HTML Images
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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
32. HTML Order Lists
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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>
33. HTML Unorder Lists
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_lists.asp
● <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>
34. HTML Description Lists
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_lists.asp
● <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>
35. HTML Nested Lists
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_lists.asp
<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>
36. HTML Block Element
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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.
37. HTML Inline Element
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_blocks.asp
● Inline elements are normally displayed without
starting a new line.
● Examples: <b>, <td>, <a>, <img>
38. HTML <div>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_blocks.asp
● <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>
39. HTML <span>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_blocks.asp
● <span> is Inline Elements.
● <span> is used as a container for text.
41. HTML Table layouts
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_layout.asp
42. HTML Table layouts
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_layout.asp
● Table layout is the old way to create layout of web
● Tables were designed for presenting tabular data -
NOT as a layout tool!
44. HTML Layouts with <div>
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_layout.asp
45. HTML Forms and Inputs
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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>
46. HTML Forms and Inputs
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_forms.asp
● 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">
47. HTML Forms and Inputs
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_forms.asp
● 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
48. HTML Forms and Inputs
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_forms.asp
● 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>
49. HTML Color Values
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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).
50. HTML Color Values
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
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.
51. HTML Entities
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/tags/ref_entities.asp
52. HTML Quick List
BASIC HTML for Web Designer by Niciuzza, nicha.in.th
Ref: http://www.w3schools.com/html/html_quick.asp
53. Enjoy
and
May HTML be with You.
BASIC HTML for Web Designer by Niciuzza, nicha.in.th