Elements n HTML elements are written with a start tag, with an end tag, with the content in between: n The HTML element is everything from the start tag to the end tag: My first HTML p
Trang 1Chapter 1 Introduction to HTML
Lectured by:
Nguyễn Hữu Hiếu
Trang 2What is an HTML File?
tags
display the page
extension
editor
Trang 3Markup languages
text
what they are and how they should be formatted
n Tags are usually paired:
n e.g <title>My Memory</title>
A pair of tags plus their content constitute an element
n Un-paired tags are called empty tags
Trang 4Markup languages
Markup Language) which is more complex
evolving, but newer versions are downward
compatible
Trang 5A basic document
n <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
n There are three required elements, defined by the tags
<html>, <head> and <body>
n Every document should start with the following lines:
Trang 6Elements
n HTML elements are written with a start tag, with an end
tag, with the content in between:
n The HTML element is everything from the start tag to the
end tag:
<p>My first HTML paragraph.</p>
n Some HTML elements do not have an end tag
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph </p>
Trang 7Attributes
n HTML elements can have attributes
n Attributes provide additional information about an
element
n Attributes are always specified in the start tag
n Attributes come in name/value pairs like: name="value"
n A complete list, of all legal attributes for each HTML
element, is listed at:
https://www.w3schools.com/tags/default.asp
Trang 8alt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
value Specifies the value (text content) for an input element
Trang 9Block elements
preceded by a blank line
Trang 10Paragraphs
n Paragraphs: <p> </p>
n Force a break between the enclosed text and the text surrounding
n The tagged region of text may be subject to special formatting
n <p align="center">Here is another paragraph</p>
n align is an attribute of the paragraph tag – center is the value of
the align attribute
<p> here is a piece of text that
has been placed inside a
paragraph </p>
<p align="center" > Here is
Trang 11Headings
n Six levels of importance <h1> <h6>
n Use headings to divide document into sections
Trang 12Element relationships
n The elements marked by tags form a hierarchy
n The root element is html (marked by <html> </html>)
n It usually has two children: head and body
n each of these are further subdivided
n There are rules for which elements can contain other
elements
n e.g headers cannot contain headers
n See http://www.w3.org/ for a full list of rules
n Elements must not overlap each other
n We cannot have: <h1> <a > </h1> </a>
n We can have: <h1> <a > </a> </h1>
Trang 13Inline descriptive elements
n Descriptive elements affect the appearance of text
depending on how the text is described
n <em></em> emphasis, usually with italics
n <strong></strong> strong, usually with bold
n <cite></cite> citation, usually in italics
n <code></code> usually results in monotype spacing
<body>
A <em> fascinating </em> subject
that I <strong> must </strong>
Understand
</body>
Trang 14Inline explicit style elements
n <boldface></boldface>
n <big></big> bigger font than surrounding text
n <small></small> smaller font than surrounding text
Trang 15Inline explicit style elements
n <font> attributes face
n name of font (must be installed)
n e.g "arial", "times", "verdana", "helvetica"
n size - absolute size (1-7), or relative to
n color - hexadecimal RGB, or a named color – “#3399dd",
"blue", "red"
n weight - boldness from 100, 200, , 900 – "100", "300",
"900”
Trang 16Unordered lists
n Unordered lists <ul> </ul>
n <li> </li> for the list elements ○ each item has a bullet
<body>
some normal text
<ul>
<li> apples </li>
<li> oranges </li>
<li> pears </li>
<li> bananas </li>
</ul>
</body>
Trang 17Ordered lists
n Ordered lists <ol> </ol>
n <li> </li> for the list elements ○ each item has a number
<body>
some normal text
<ol>
<li> apples </li>
<li> oranges </li>
<li> pears </li>
<li> bananas </li>
</ol>
</body>
Trang 18Definition lists
n <dl></dl> The enclosing tags
n <dt></dt> The definition term
Trang 19Nested lists
n A list may contain another list
n The inner list is nested inside the outer list
<body>
<ol>
<li> apples </li>
<ul>
<li> red </li>
<li> green </li>
</ul>
<li> oranges </li>
<li> pears </li>
<li> bananas </li>
</ol>
</body>
Trang 20• An HTML table is defined with
the <table> tag.
• Each table row is defined with the <tr> tag.
• A table header is defined with the <th> tag
By default, table headings are bold and centered.
• A table data/cell is defined with
the <td> tag.
Trang 22Horizontal lines
n To insert a horizontal line to divide up parts of a document
we use the empty tag <hr> , <hr />
n Attributes: align, size (in pixels), width (in pixels or
Trang 23Special characters
n Some characters such as <, >, " and & have special
meanings
n To prevent them being interpreted as HTML code, they
must be written as follows:
n < = < > = > “” = " & = &
n Blank space is normally ignored in HTML To include a
space in your document use:
Trang 24Links
hypertext links between
1 different documents (using a URL)
2 different parts of an individual document
1 retrieval and display of the designated document
2 movement to relevant part of same document
Trang 25Link with URL
n The href attribute gives the URL of the target page
n The text between the tags is highlighted – selecting it
activates the link
Trang 26Relative addressing
known as the absolute address
the directory containing the parent page of the link
<a href="research.html">Research</a>
<a href=“./pub.html">Publications</a>
<a href=" / /index.html">Computer Science home</a>
Trang 27Images
n Example: <img src="mypicture.gif" alt="my picture”
Image absolute or relative path names can be
used (see
http://www.w3schools.com/tags/tag_img.asp)
if the image is not viewed
n some users choose not to display images (for faster
download)
n also used for compatibility with older browsers
Trang 28Image attributes
Trang 29Links with images
Trang 30Colour
for the red, green and blue primary colours,
preceded by a “#”.
<body bgcolor="#994422">
Trang 31Colour – RGB Model
– #ff0000 (red), – #00ff00 (green) – #0000ff (blue) – #ffff00 (yellow)
–
– #3395ab (a pastel blue)
Trang 32Forms
n Server-based programs may return data to
the client as a web page
n Client-side scripts can read input data
web page content that is displayed on the client
Trang 33Example applications
n Questionnaires to provide feedback on a
web site e-commerce, to enter name,
address, details of purchase and
n credit-card number
n request brochures from a compan
n make a booking for holiday, cinema etc ❖ buy a book,
cd, etc
n obtain a map giving directions to a shop
n Run a database query and receive results
(an important part of e- commerce)
Trang 35The method and action attributes
n The method attribute specifies the way that form data is
sent to the server program
n GET appends the data to the URL
n POST sends the data separately
n The action attribute specifies a server program that
processes the form data (often as a URL)
<body>
<form method="POST" action="comments.php" >
<h2>Tell us what you think</h2>
<! etc >
</form>
</body>
Trang 36The input element: type="text”
n The type attribute specifies the type of user input
n The name attribute gives an identifier to the input data
<form method="POST" action="comments.php” >
<h2>Tell us what you think</h2>
Name <input name="name" type="text" size="20” />
<br>
Address <input name="address" type="text" size="30” />
</form>
Trang 37The input element: type="checkbox”
n The name attribute is used to define a set of checkboxes
n The value attribute identifies the individual checkbox
n If the checked attribute is set the box is initially checked
How did you hear about this web site?
Trang 38The input element: type="radio”
n Radio buttons are similar to checkboxes, but only one can
Trang 39The input element: type="button”
n The name attribute uniquely identifies a button
n The value attribute gives a label to the button
n Actions can be associated with buttons using JavaScript
Do you want to receive any further information:
<br>
<input type="button" name="yes" value=" Yes” />
<input type="button" name="no" value=" No” />
Trang 40The input element: type="submit/reset”
n type="submit"
n clicking this button sends the form data to the program (URL)
specified in the action attribute of the form
n type="reset"
n clicking this button clears all data entered so far
Thank you<br>
<input type="submit" name="send" value="Send” />
<input type="reset" name="clear" value="Clear” />
Trang 41The input element:type="password/file/hidden”
n type="password”
n similar to type="text" except that the input is
n echoed”*****” with asterisks (so not visible)
n The data might be set by a server program to keep track of the
details of a particular transaction
Trang 42The textarea element
n Used for multi-line text input
n The size of the input area is specified with the cols and
rows attributes
n Any text placed inside the element appears in the input
area (this can be deleted)
Please write your comments:<br>
<textarea name="comments" rows="5" cols="20" >
put text here
</textarea>
Trang 43The select element
n The select element provides a menu of options
n An option can be selected by default using the selected
attribute (otherwise the first in the list is initially selected)
How do you rate this site?<br>
<select name="rating” >
<option> Good </option>
<option selected> Bad </option>
<option> Ugly </option>
</select>
Trang 44Tài Liệu Tham Khảo
n [1] Stepp,Miller,Kirst Web Programming Step by Step.( 1st Edition, 2009) Companion Website:
http://www.webstepbook.com/
n [2] W3Schools,
http://www.w3schools.com/html/default.asp