Scribd
Upload
20 views

Lecture1 HTML

HTML is the standard markup language used to create web pages. HTML elements are the building blocks of web pages and describe the structure of a web page. HTML tags like <h1>, <p>, and <a> define headings, paragraphs, and links. Web browsers read HTML documents and display them according to the HTML elements and tags.

Uploaded by

Lưu Gia Huy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

Lecture1 HTML

HTML is the standard markup language used to create web pages. HTML elements are the building blocks of web pages and describe the structure of a web page. HTML tags like <h1>, <p>, and <a> define headings, paragraphs, and links. Web browsers read HTML documents and display them according to the HTML elements and tags.

Uploaded by

Lưu Gia Huy
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 70

* HTML 5

NT208 – Web-based Programming


[email protected]
What is HTML?
HTML is the standard for creating Web pages.
• HTML stands for Hyper Text Markup Language
• HTML describes the structure of Web pages
using markup
• HTML elements are the building blocks of HTML
pages
• HTML elements are represented by tags
• Browsers do not display the HTML tags, but use
them to render the content of the page
HTML Versions
Since the early days of the web, there have been
many versions of HTML:
Example Explained

* The <!DOCTYPE html> declaration defines


this document to be HTML5
*
The <html> element is the root element of
an HTML page
*
The <head> element contains meta
information about the document
*
The <title> element specifies a title for the
document
*
The <body> element contains the visible
page content
*
The <h1> element defines a large heading
*
The <p> element defines a paragraph
HTML Tags
HTML tags are element names surrounded by
angle brackets:
<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p>


and </p>
• 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, but
with a forward slash inserted before the tag
name
• Tip: The start tag is also called the opening
tag, and the end tag the closing tag.
Web Browsers
• The purpose of a web browser (Chrome, IE, Firefox,
Safari) is to read HTML documents and display
them.
• The browser does not display the HTML tags, but
uses them to determine how to display the
document:
The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the


document type, and helps browsers to display web
pages correctly.
• It must only appear once, at the top of the page
(before any HTML tags).
• The <!DOCTYPE> declaration is not case
sensitive.
• The <!DOCTYPE> declaration for HTML5 is:
• <!DOCTYPE html>
HTML Page Structure
Below is a visualization of an HTML page structure:
HTML Comment Tags
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag,
but not in the closing tag.

Note: Comments are not displayed by the browser, but they can
help document your HTML source code.

With comments you can place notifications and reminders in your


HTML:

Example
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


Write HTML Using Notepad

Step 1: Open Notepad (PC)

Step 2: Write Some HTML


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer.
Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8


(which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser


(double click on the file, or right-click - and choose
"Open with").

The result will look much like this:


HTML Basic Examples
HTML Documents
• All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
• The HTML document itself begins with <html> and ends
with </html>.
• The visible part of the HTML document is between <body>
and </body>.
HTML Headings

HTML headings are defined with the <h1> to


<h6> tags.
<h1> defines the most important heading.
(largest)
<h6> defines the least important
heading: (smallest)

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:


Example

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links

HTML links are defined with the <a> tag:

Example
<a href="https://www.w3schools.com">This is a link</a>

• The link's destination is specified in the href


attribute.
• Attributes are used to provide additional information
about HTML elements.
HTML Images

HTML images are defined with the <img> tag.


The source file (src), alternative text (alt), width, and height
are provided as attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Nested HTML Elements

HTML elements can be nested (elements can contain


elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
Example Explained
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body>
element).
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
The <body> element defines the document
body.
It has a start tag <body> and an end tag
</body>.
The element content is two other HTML
elements (<h1> and <p>).

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>

The <p> element defines a paragraph.


It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>

<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
Do Not Forget the End Tag
What end tag is missing??

<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

The example above works in all browsers, because the


closing tag is considered optional.
Never rely on this. It might produce unexpected
results and/or errors if you forget the end tag.
Always Use Lowercase Tags

HTML tags are not case sensitive: <P> means the


same as <p>.

The HTML5 standard does not require lowercase


tags, but W3C recommends lowercase in HTML,
and demands lowercase for stricter document
types like XHTML.
All HTML elements can have attributes

• The title attribute provides additional "tool-tip"


information
• The href attribute provides address information for links
• The width and height attributes provide size information
for images
• The alt attribute provides text for screen readers
• At W3Schools we always use lowercase attribute names
• At W3Schools we always quote attribute values with
double quotes
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines
the least important heading.
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
Headings Are Important
Search engines use the headings to index the structure and content of your
web pages.
Users skim your pages by its headings. It is important to use headings to
show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make text
BIG or bold.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML
page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or
define a change) in an HTML page:
Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Horizontal Rules
Adding Attributes

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr size=10 color=red align=left width=
50%>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <head> Element
The HTML <head> element has nothing to do with HTML
headings.
The <head> element is a container for metadata. HTML
metadata is data about the HTML document. Metadata is not
displayed.
The <head> element is placed between the <html> tag and
the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
Note: Metadata typically define the document title, character set, styles,
<body>
links, scripts, and other meta information.
HTML Text Formatting
Text Formatting
This text is bold
This text is italic
This is subscript and superscript
HTML uses elements like <b> and <i> for formatting output, like
bold or italic text.
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
See w3schools website
HTML Colors

In HTML, a color can be specified by using:


• a color name
• an RGB value
• a HEX value.
Color Names
In HTML, a color can be specified by using a color name:

HTML supports 140 standard color names.


HEX Value
In HTML, a color can also be specified using a
hexadecimal value in the form:

For example, #FF0000 is displayed as red, because red


is set to its highest value (FF) and the others are set to
the lowest value (00).

000000 = black
FFFFFF = white
HTML Images

<!DOCTYPE html>
<html>
<body>

<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View" style="width:304px;height:228px;">

</body>
</html>
HTML Links
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into
a little hand.

Note: A link does not have to be text. It can be an image or any other
HTML element.
In HTML, links are defined with the <a> tag:

<a href="url">link text</a>

<a href="https://www.google.com">Click here to go to Google</a>

• The href attribute specifies the destination address


https://www.google.com of the link.
• The link text is the visible part (Click here to go to Google).
Clicking on the link text will send you to the specified address.
HTML Links - The target Attribute
The target attribute specifies where to open the linked
document.
The target attribute can have one of the following values:
• blank - Opens the linked document in a new window or tab
• self - Opens the linked document in the same window/tab
as it was clicked (this is default)
• parent - Opens the linked document in the parent frame
• top - Opens the linked document in the full body of the
window
framename - Opens the linked document in a named frame
This example will open the linked document in a new
browser window/tab:
Example
<a href="https://www.google.com/" target="_blank">Visit
Google</a>
The alt Attribute:
The alt attribute provides an alternate text for
an image, if the user for some reason cannot
view it (because of slow connection, an error
in the src attribute, or if the user uses a
screen reader).
If a browser cannot find an image, it will
display the value of the alt attribute:
Example:
<img src="wrongname.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an
image.
The values are specified in pixels (use px after the value):

Example
<img src="html5.gif" alt="HTML5 Icon"
style="width:128px;height:128px;">
Alternatively, you can use the width and height attributes. Here, the values
are specified in pixels by default:

Example

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


HTML List
Unordered HTML List
An unordered list starts with the <ul> tag. Each
list item starts with the <li> tag.

The list items will be marked with bullets (small


black circles) by default:

Example

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
The CSS list-style-type property is used to define
the style of the list item marker:

Value Description
Sets the list item marker to a
disc
bullet (default)
Sets the list item marker to a
circle
circle
Sets the list item marker to a
square
square
The list items will not be
none
marked
Example - Circle

<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

An ordered HTML list


1. Coffee
2. Tea
3. Milk
*Ordered Lists: <ol> Tag
*Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

*Attribute values for type are 1, A, a, I, or i


1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit 44 III. Grapefruit
* Unordered Lists: <ul> Tag
* Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>
* Attribute values for type are:
*disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
45
*Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

46
* Tables represent tabular data
* A table consists of one or several rows

* Each row has one or more columns

* Tables comprised of several core tags: <table></table>: begin /


end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)

* Tables should not be used for layout. Use CSS floats and positioning
styles instead

*Formatting Content
47
with Tables
* Start and end of a table
<table> ... </table>
* Start and end of a row
<tr> ... </tr>
* Start and end of a cell in a row

<td> ... </td>

*HTML Tables (2)


48
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>

HTML Tables – Example


49
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>

50
*Nested Tables
*Table data “cells” (<td>) can contain nested
tables (tables within tables):
<table> nested-tables.html
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table> 51
* Cell Spacing and Padding
* Tables have two important attributes:

 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty


empty space space around the
between cells cell content
52
* Cell Spacing and Padding –
table-cells.html Example
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>

53
*Column and Row Span
* Table cells have two important attributes:
 colspan  rowspan

colspan="1 colspan="1 rowspan="2 rowspan="1


" " " "
cell[1,
cell[1, cell[1,2
1] ] 2]
cell[1,1]
cell[2,
cell[2,1]
1]
rowspan="1
 Defines how colspan="2  Defines how"
"
many columns many rows the
the cell cell occupies
54
occupies
table-colspan-rowspan.html

<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

* Column and Row Span –


55
Example
* Column and Row Span –
Example (2)
table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Cell[1,1] Cell[2,1]

Cell[1,2] Cell[3,2]
Cell[2,2]
Cell[1,3] 56 Cell[2,3]
* Home work: Design the
following table

57
*Collecting Input with
Forms
* Forms are the primary method for gathering data from site
visitors
* Create a form block with The “method" attribute tells
<form></form> how the form data should be
sent – via GET or POST request
* Example:
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action" attribute tells
where the form data should be
sent 58
*Form Fields
*Single-line text input fields:
<input type="text" name="FirstName" value="This
is a text field" />

*Multi-line
<textareatextarea fields:
name="Comments">This is a multi-line
text field</textarea>

*Hidden fields contain data not shown to the user:


<input type="hidden" name="Account" value="This
is a hidden text field" />

*Often used by JavaScript code


59
*Form Input Controls
*Checkboxes:
<input type="checkbox" name="fruit"
value="apple”/>

*Radio buttons:
<input type="radio" name="title" value="Mr." />

*Radio buttons can be grouped, allowing only


one to be selected from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
60
* Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
* Submit button:
<input type="submit" name="submitBtn"
value="Apply Now" />

61
*Reset button – brings the form to its initial
state
<input type="reset" name="resetBtn"
value="Reset the form" />

*Image button – acts like submit but image is


displayed and click coordinates are sent
<input type="image" src="submit.gif"
name="submitBtn" alt="Submit" />

*Ordinary button – used for JavaScript, no


default action
<input type="button" value="click
62
me" />
*Other Form Controls
(4)
*File input – a field used for uploading files
<input type="file" name="photo" />

*When used, it requires the form element to


have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form>

63
*Form labels are used to associate an explanatory
text to a form field using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

*Clicking on a label focuses its associated field


(checkboxes are toggled, radio buttons are
checked) *Labels
*Labels are both a usability and accessibility
feature and are required in order to pass
accessibility validation. 64
*Forms – Example
form.html
<form method="post"action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname"
65 id="lname" />
form.html (continued)

<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>

66
* HTML5: New form elements

67
68
Error-Prevention Tip :
* The autocomplete attribute works only if you specify a name
or id attribute for the input element.

69
* Once you fill a data in the text box ..html 5 can recover the
previous input. *we use a datalist element to
obtain the user’s birth month.

*Output
70

You might also like