3. Agenda
Part I: Introduction
What is HTML?
Client & Server
HTML Versions
HTML Tags
HTML Page Structure
Web Browsers
HTML Editors
4. What is HTML?
• HTML stands
for Hyper Text Markup Language
• HTML is a markup language
• A markup language is a set of markup tags
• The tags describe document content
• HTML documents contain HTML tags and
plain text
• HTML documents are also called web pages
7. HTML Tags
• HTML tags are keywords (tag names) surrounded
by angle brackets like <html>
• The first tag in a pair is the start tag, the second
tag is the end tag
• The end tag is written like the start tag, with
a slash before the tag name
• Start and end tags are also called opening
tags and closing tags
• HTML tags normally come in pairs like <html>
and </html>
9. Web Browsers
• A browser is a software program which
interprets the HTML documents and displays it
on the user’s screen.
• The purpose of a web browser (such as
Google Chrome, Internet Explorer, Firefox,
Safari) is to read HTML documents and
display them as web pages.
11. HTML Editors
• Write HTML Using Notepad or TextEdit
• We believe using a simple text editor
(Notepad) is a good way to learn HTML.
• Follow the 4 steps below to create your first
web page with Notepad.
12. Step 1: Open Notepad
• To open Notepad in Windows 7 or earlier:
• Click Start (bottom left on your screen).
• Click All Programs. Click Accessories.
• Click Notepad.
• To open Notepad in Windows 8 or later:
• Open the Start Screen (the window symbol at the
bottom left on your screen).
• Type Notepad.
13. Step 2: Write Some HTML
• Write or copy some HTML into Notepad.
14. Step 3: Save the HTML Page
• Save the file on your computer.
• Select File -> Save as in the Notepad menu.
• When saving an HTML file, use either the .htm
or the .html file extension. There is no
difference, it is entirely up to you.
15. Step 4: View HTML Page in Your Browser
• Double-click your saved HTML file, and the
result will look much like this:
16. Professional HTML Editors
• HTML can be edited by using a professional
HTML editor like:
• Adobe Dreamweaver
• Netbeans
• CoffeeCup HTML Editor
• Microsoft Expression Web
18. Agenda
Part II: HTML Tags (Basic)
HTML Head Tag
HTML Body Tag
HTML Basic Tags
HTML Heading Tags
HTML Paragraph Tag
HTML Formatting Tags
HTML Attributes
HTML Styles
19. HTML Head Tag
• The <head> element is a container for all the
head elements. Elements inside <head> can
include scripts, instruct the browser where to
find style sheets, provide meta information,
and more.
• The following tags can be added to the head
section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
• The <title> tag defines the title of the
document.
20. HTML Body Tag
• The <body> tag defines the document's body.
• The <body> element contains all the contents
of an HTML document, such as text,
hyperlinks, images, tables, lists, etc.
23. HTML Basic Tags
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br /> Inserts a single line break
<hr /> Defines a thematic change in the
content
<!--...--> Defines a comment
24. HTML Heading Tags
• HTML headings are defined with the <h1> to
<h6> tags.
• Example:
28. HTML Formatting Tags
Tag Description
<u> Defines text that should be stylistically different from
normal text
<strong> Defines important text
<b> Defines bold text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<big> Not supported in HTML5. Use CSS instead. Defines big text
<font> Not supported in HTML5. Use CSS instead. Defines font,
color, and size for text
<center> Not supported in HTML5. Use CSS instead. Defines
centered text
29. HTML Formatting Tags
• HTML uses tags like <b> and <i> for
formatting output, like bold or italic text.
• Example:
31. HTML Attributes
• HTML elements can have attributes
• Attributes provide additional
information about an element
• Attributes are always specified in the start tag
• Attributes come in name/value pairs
like: name="value"
36. Agenda
Part III: HTML Tags
HTML Lists Tags
Unordered Lists Tags
Ordered Lists Tags
HTML Hyperlink Tag
HTML Image Tag
HTML Table Tags
HTML Layouts
37. HTML Lists Tags
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
38. Unordered Lists Tags
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• Example:
42. HTML Hyperlink Tag
• The HTML <a> tag defines a hyperlink.
• A hyperlink (or link) is a word, group of words,
or image that you can click on to jump to
another document.
• When you move the cursor over a link in a
Web page, the arrow will turn into a little hand.
45. HTML Image Tag
• In HTML, images are defined with the <img>
tag.
• To display an image on a page, you need to
use the src attribute. Src stands for "source".
The value of the src attribute is the URL of the
image you want to display.
48. HTML Table Tags
Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
49. HTML Table Tags
• Tables are defined with the <table> tag.
• A table is divided into rows with the <tr> tag.
(tr stands for table row)
• A row is divided into data cells with
the <td> tag. (td stands for table data)
52. HTML Layouts
• Most websites have put their content in
multiple columns (formatted like a magazine or
newspaper).
• Multiple columns are created by using <div>
or <table> elements.
• The div element is a block level element used
for grouping HTML elements.
• A simple way of creating layouts is by using
the HTML <table> tag.
57. Agenda
Part V: HTML Forms
HTML Forms and Input Tags
HTML Form Tag
Text Fields
Password Field
Radio Buttons
Checkboxes
Submit Button
58. HTML Forms and Input Tags
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
59. HTML Form Tag
• HTML forms are used to pass data to a
server.
• An HTML form can contain input elements like
text fields, checkboxes, radio-buttons, submit
buttons and more. A form can also contain
select lists, textarea, fieldset, legend, and label
elements.
• The <form> tag is used to create an HTML
form
• The most important form element is the
<input> element.
68. Submit Button
• A submit button is used to send form data to
a server. The data is sent to the page specified
in the form's action attribute.
• On Chrome Browser