Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
12 views

Lec 2-HTML

The document describes different types of lists that can be created in HTML, including ordered lists using <ol> tags, unordered lists using <ul> tags, and definition lists using <dl> tags. It provides examples of how to structure each type of list using <li> tags for list items and <dt> and <dd> tags for term and definition items in a definition list. Styles can be added to change list appearance and numbering.

Uploaded by

Vũ Phước
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Lec 2-HTML

The document describes different types of lists that can be created in HTML, including ordered lists using <ol> tags, unordered lists using <ul> tags, and definition lists using <dl> tags. It provides examples of how to structure each type of list using <li> tags for list items and <dt> and <dd> tags for term and definition items in a definition list. Styles can be added to change list appearance and numbering.

Uploaded by

Vũ Phước
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

HTML

Objectives
• Describe hypertext and HTML standards
• Understand HTML elements and markup tags
• Create the basic structure of an HTML file
• Insert an HTML comment
• Work with block-level elements
• Create lists, tables, hyperlinks and insert images
• Learn HTML5 tags
• Work with forms and inputs

2
Outline
1. Basic HTML
• hypertext
• tags & elements
• text formatting
• lists, hyperlinks, images
• tables, frames
2. HTML5

3
Hypertext & HTML
• HyperText Markup Language (HTML) is the language for
specifying the static content of Web pages (based on SGML,
the Standard Generalized Markup Language)
• hypertext refers to the fact that Web pages are more than just text
• can contain multimedia, provide links for jumping within the same
document & to other documents
• markup refers to the fact that it works by augmenting text with
special symbols (tags) that identify the document structure and
content type

4
Hypertext & HTML (cont.)
• HTML 1 (Berners-Lee, 1989): very basic, limited integration of multimedia
in 1993, Mosaic added many new features (e.g., integrated images)
• HTML 2.0 (IETF, 1995): tried to standardize these & other features, but late
in 1994-96, Netscape & IE added many new, divergent features
• HTML 3.2 (W3C, 1997): attempted to unify into a single standard but didn't
address newer technologies like Java applets & streaming video
• HTML 4.0 (W3C, 1997): attempted to map out future directions for HTML,
not just react to vendors
• HTML 5 (W3C, 2014): adds new tags and attributes
5
Tags and Elements
• HTML specifies a set of tags that identify structure of the document and
the content type
• tags are enclosed in < >
• <img src="image.gif" /> specifies an image
• most tags come in pairs, marking a beginning and ending
• <title> and </title> enclose the title of a page
• An HTML element is an object enclosed by a pair (in most cases) of tags
• <title>My Home Page</title> is a TITLE element
• <b>This text appears bold.</b> is a BOLD element
• <p>Part of this text is <b>bold</b>. </p> is a PARAGRAPH
element that contains a BOLD element
An HTML document is a collection of elements (text/media with context). 6
Structural Elements
• an HTML document has two main structural elements
• HEAD contains setup information for the browser & the Web page
• BODY contains the actual content to be displayed in the Web page

<html>
<!–- First file----> HTML documents : <html> and </html> tags
<head>
<title>My first HTML document</title> Comments: <!-- and -->
</head>
<body> HEAD section: <head> and </head> tags
<p> Hello world! </p>
</body>
BODY section: <body> and </body>
</html>

view page

7
<head> and <body> elements
• <head> element
• Title
• Cascading Style sheet information
• “Meta” data, such as who authored the page, keywords
• JavaScript code
• The <body> element
• Paragraphs
• Tables and lists
• Images
• JavaScript code
• PHP code

8
Text Layout
• For the most part, layout of the text is
<html>
<!–- CS443 page02.html 17.09.14 -->
<head>
<title>Text Layout</title>
</head> left to the browser
<body>
<p>
• whitespace is interpreted as a single space
• browser automatically wraps the text to fit
This is a paragraph of text<br/>
made up of two lines.
</p>

<p>
the window size
This is another paragraph with a
&nbsp; GAP &nbsp; between
some of the words.
• Can override some text layout
</p>
• can specify a new paragraph (starts on a
<p>
&nbsp;&nbsp; This paragraph is<br/> new line, preceded by a blank line) using
indented on the first line<br/>
but not on subsequent lines. <p>…</p>
</p>
</body>
• can cause a line break using the <br/>
</html>
• can force a space character using &nbsp;
view page 9
Separating Blocks of Text
<html>
<!–- CS443 page03.html 15/08/06 --> • Can specify headings for paragraphs or
<head>
<title>Blocks of Text</title>
</head>
blocks of text
<body>
<h1>Major heading 1</h1> •<h1>…</h1> tags produce a large, bold
<p>
Here is some text. heading
</p>
•<h2>…</h2> tags produce a slightly
<h2>Subheading</h2>
<p> smaller heading
Here is some subtext.
</p>
•. . .
<hr/>
•<h6>…</h6> tags produce a tiny heading
<h1>Major heading 2</h1>
<p>
Here is some more text.
</p>
</body> • Can insert a horizontal rule
</html>

view page
•<hr/> draws line across window
10
The Basic Web page – A Worked Example
<html>
<!–- CS443 page22.html 17.10.14 -->
<head>
<title> Bill Smiggins Inc. </title>
</head>
<body>
<h1>Bill Smiggins Inc.</h1>
<h2>About our Company...</h2>
<p>This Web site provides clients, customers,
interested parties and our staff with all of
the information that they could want on
our products, services, success and failures.
</p>
<hr/>
<h3> Products </h3>
<p> We are probably the largest
supplier of custom widgets, thingummybobs, and bits
and pieces in North America. </p>
<hr/>
</body>
</html>

view page 11
Text Appearance
<html>
<!–- CS443 page25.html 15.08.06 -->
<head>
<title>Text Variations and Escape
• can specify styles for fonts
Sequences</title>
</head>
<body>
•<b>… </b> specify bold
<h1>Text Variations</h1>
<p>We can use <b>simple</b> tags to
<i>change</i> the appearance of
•<i>… </i> specify italics
<strong>text</strong> within
<tt>Web pages</tt>. •<big>… </big> increase the size
Even super<sup>script</sup>
and sub<sub>scripts</sub> are
<em>supported</em>.</p> •<small>… </small> decrease the size
<h1>Text Escape Sequences</h1>
<p> •<em>…</em> put emphasis
&amp; &lt; &gt; &quot; &copy;
</p>
<h1>Preformatted text</h1>
•<strong>…</strong> put more emphasis
<pre>
University of Liverpool
Department of Computer Science
•<sub>… </sub> specify a subscript
Ashton Building, Ashton Street
Liverpool, L69 3BX, UK
</pre>
•<sup>… </sup> a superscript
</body>
</html>
12
view page
Lists
<html>
<!–- CS443page07.html 23.09.08 -->
<head> <title>(Sort of) Simple Lists</title> • There are 3 different types of list
elements
<style type="text/css">
.my_li:before { content: counter(list) ": ";
counter-increment: list; }
</style> </head>
<body> • <ol>…</ol> specifies an ordered list
<ul style="list-style-type: square;">
<li> ... first list item... </li>
• <li> identifies each list item
<li> ... second list item... ... </li>
</ul> • <ul>…</ul> specifies unordered list
<dl> <dt> Dweeb </dt>
<dd> young excitable person who may (using a bullet for each)
mature into a <em>Nerd</em> </dd>
<dt> Hacker </dt>
<dd> a clever programmer </dd>
• <li> identifies each list item
<dt> Nerd </dt> <dd> technically bright but

</dl>
socially inept person </dd> • <dl>…</dl> specifies a definition list
<ol style="list-style-type: none;
counter-reset: list 29;" > • <dt> identifies each term
<li class="my_li">Makes first item number 30.</li>
<li class="my_li">Next item continues to number
31.</li>
• <dd> identifies its definition
</ol>

</body>
</html>

view page 13
Hyperlinks
• Perhaps the most important HTML element is
<html> the hyperlink, or ANCHOR
<!–- CS443page08.html 17.10.14 -->

<head>
<title>Hyperlinks</title> • <a href="URL">…</a>
</head>
• where URL is the Web address of the page
<body>
<p> • if the page is accessed over the Web, must
<a href="http://www.liv.ac.uk">
The University of Liverpool</a>
start with http://
<br/>
<a href="page07.html" • if not there, the browser will assume it is the
target="_blank">
Open page07 in a new window</a>
name of a local file
</p>
</body>

</html> • <a href="URL" target="_blank">…</a>


view page • causes the page to be loaded in a new
Window 14
Hyperlinks (cont.)
<html>
<!–- CS443 page09.html 21.09.12 --> • for long documents, you can even have
<head> links to other locations in that same
<title>Internal Links in a Page</title>
</head> document
<body>
<p>
[ <a href="#HTML">HTML</a> |
• <xxxx id="ident">…</xxxx>
<a href="#HTTP">HTTP</a> | • ident is a variable for identifying this
location
<a href="#IP">IP</a> |
<a href="#TCP">TCP</a> ]

• "xxxx" can be any HTML element


</p>
<p>
Computer acronyms:
<dl>
<dt id="HTML">HTML</dt>
<dd>HyperText Markup Language • <a href="#ident">…</a>
<dt id="HTTP">HTTP</dt>
<dd>HyperText Transfer Protocol…</dd> • will then jump to that location within
<dt id="IP">IP</dt>
<dd>Internet Protocol…</dd> the file
<dt id="TCP">TCP</dt>
<dd>Transfer Control Protocol…</dd>
</dl>
</p>
• <a href="URL#ident">…</a>
</body>
• can jump into the middle of another
</html> file just as easily
view page 15
Images
<img src="URL (or filename)" height="n" width="n"
alt="text" title= "text" />

<html>
<!–- CS443 page10.html 18.09.13 -->
<head>
<title>Image example</title>
</head>
<body>
<img
src="http://www.csc.liv.ac.uk/~martin/teaching/comp519/HTML/Cathedral.jpg"
title="Liverpool's Anglican cathedral"
alt="image of Liverpool's Anglican Cathedral" width="400" />

<p>The Anglican Cathedral of Liverpool</p> </body>


</html>

view page

16
Images (cont.)
§ src - specifies the file name (and can include a URL)
§ width and/or height - dimensions in pixel
§ title - displayed when the mouse is “hovered” over the
picture
§ alt - text that is displayed when the image is missing, can’t be
loaded

17
Tables
<html>
<!–- CS443 page11.html 17.10.14 -->
<head>
<title>Tables</title>
</head> <table>…</table> specify a table element
<body>
<h2>A Simple Table</h2>
<table>
<tr>
<tr>…</tr> specify a row in the table
<td> Left Column </td>
<td> Right Column </td>
</tr>
<td>…</td> specify table data (i.e., each column
<tr> entry in the table)
<td> Some data </td>
<td> Some other data </td>
</tr>
</table>
</body>
</html>

view page

18
Layout in a Table
<html>
<!-- CS443 page12.html 17.10.14 --> • Border on tables using the “style” attribute
<head> <table style= "border: 1px
<title>Table Layout</title>
</head> solid;">
<body>
<table style="border: 1px solid;">
<tr style="text-align: center;"> • Horizontal & vertical layout within cells
<td style="border: 1px solid;">
Left<br/>Column</td> <td style= "text-align:center">
<td style="border: 1px solid;
vertical-align: top;"> <td style= "vertical-align:
Right Column</td>
</tr> bottom">
<tr>
<td style="border: 1px solid;">
Some data</td>
<td style="border: 1px solid;"> • Layout to an entire row
Some data</td>
</tr> <tr style="text-align: center">
</table>
</body> <tr style="vertical-align: top">
</html>

view page 19
Table Width

<html>
<!-- CS443 page13.html 17.10.14 --> • by default, the table is sized to fit the
<head>
<title>Table Width</title>
data
</head>

<body> • can override & specify the width of a


<table style="width: 100%;"> table relative to the page
<tr>
<td>left-most </td>
<td style="text-align: right;"> For example
right-most</td> <table style="width: 60%">
</tr>
</table>
</body>
</html>
view page

20
Other Table Attributes
<html>
<!-- CS443 page14.html 17.10.14 -->
<head> •Can control the space between cells & margins
<title>Table Formatting</title>
within cells using “padding” attribute
<style type="text/css" media="screen">
table { border: 1px solid; padding: 1px;}
th, td { border: 1px solid; padding: 10px;
text-align: center; } • Can add headings
</style>
</head> <th> is similar to <td> but displays
<body>
<table>
heading centered in bold
<tr>
<th>HEAD1</th> <th>HEAD2</th>
<th>HEAD3</th>
</tr> • Can have data that spans more than one
column
<tr>
<td>one</td> <td>two</td> <td>three</td>
</tr>
<tr> <td colspan="2">
<td rowspan="2"> four </td>
<td colspan="2"> five </td>
</tr>
<tr>
<td> six </td> <td> seven </td> • Can span more than one row
</tr>
</table> <td rowspan="2">
</body>
</html>
view page
21
Content vs. Presentation
• Most HTML tags define content type, independent of presentation.
• exceptions? (e.g. <b> …… </b> for bold text and <i> ….. </i> for italicized text)
• Style sheets associate presentation formats with HTML elements.
• CSS1: developed in 1996
• CSS2: released in 1998
• CSS3: introduced in 1999, lastest version (as of 2022)
• The trend has been towards an increasing separation of the content of webpages
from the presentation of them.
• Style sheets allow us to maintain this separation, which allows for easier
maintenance of webpages, and for a consistent look across a collection of webpages.

22
Content vs. Presentation (cont.)
• Style sheets can be used to specify how tables should be rendered, how lists should
be presented, what colors should be used on the webpage, what fonts should be used
and how big/small they are, etc.
• HTML style sheets are known as Cascading Style Sheets, since can be defined at
three different levels
1.inline style sheets apply to the content of a single HTML element
2.document style sheets apply to the whole BODY of a document
3.external style sheets can be linked and applied to numerous documents, might also specify how
things should be presented on screen or in print lower-level style sheets can override higher-level
style sheets
• User-defined style sheets can also be used to override the specifications of the
webpage designer. These might be used, say, to make text larger (e.g. for visually-
impaired users).
23
Inline Style Sheets
<html>
<!–- CS443 page17.html 17.10.14 --> • Using the style attribute, you can specify presentation
style for a single HTML element
<head>
<title>Inline Style Sheets</title> • within tag, list sequence of property:value pairs separated
</head> by semi-colons
<body>
<p style="font-family:Arial,sans- font-family:Courier,monospace
serif; font-style:italic
text-align:right">This is a font-weight:bold
right-justified paragraph in a sans font-size:12pt font-size:large font-size:larger
serif
font (preferably Arial), with some
color:red color:#000080
<span style="color:green">green
text</span>. background-color:white
</p>
text-decoration:underline
<p>And <a style="color:red; text-decoration:none
text-decoration:none; text-align:left text-align:center
font-size:larger;" text-align:right text-align:justify
href="page01.html">here</a>
vertical-align:top vertical-align:middle
is a formatted link.
</p> vertical-align:bottom
</body>
</html> view page text-indent:5em text-indent:0.2in
24
Inline Style Sheets (cont.)
<html>
<!–- CS443 page18.html 17.09.09 --> •more style properties & values
<head>
<title>Inline Style Sheets</title> margin-left:0.1in margin-right:5%
</head>
margin:3em
<body> padding-top:0.1in padding-bottom:5%
<p>Here is an image
<img src="VictoriaBldg.jpeg"
padding:3em
alt="image of Victoria Building"
style="margin-left:0.3in;
margin-right:0.3in; border-width:thin border-width:thick
vertical-align:middle; border-width:5
border-style:double;
border-color:blue" /> border-color:red
embedded in text. border-style:dashed border-style:dotted
</p>
border-style:double border-style:none
<ol style="list-style-type:upper-alpha">
<li> one thing</li>
<li> or another</li> whitespace:pre
<ul style="list-style-type:square;
whitespace:pre">
<li> with this</li> list-style-type:square
<li> or that</li>
</ul>
list-style-type:decimal
</ol> list-style-type:lower-alpha
</body>
</html> list-style-type:upper-roman

view page 25
Inline Style Sheets (cont.)
•style sheets can be
<html>
<!–- CS443 page19.html 17.10.14 -->

applied to tables for


<head>
<title> Inline Style Sheets </title>
</head>

<body>
<table style="font-family:Arial,sans-serif">
interesting effects
<caption style="color:red;
font-style:italic;
text-decoration:underline">
Student data. </caption>
<tr style="background-color:red">
<th> name </th> <th> age </th>
</tr>
<tr>
<td> Chris Smith </td> <td> 19 </td>
</tr>
<tr>
<td> Pat Jones </td> <td> 20 </td>
</tr>
<tr>
<td> Doogie Howser </td> <td> 9 </td>
</tr>
</table>
</body>
</html> view page
26
Document Style Sheets
• Inline style sheets apply to individual elements in the page.
• using inline style directives can lead to inconsistencies, as similar elements are
formatted differently
• e.g., we might like for all <h1> elements to be centered
• inline definitions mix content & presentation
èviolates the general philosophy of HTML
• As a general rule, inline style sheet directives should be used as sparingly as
posible
• Alternatively, document style sheets allow for a cleaner separation of content
and presentation.
• style definitions are placed in the <head> of the page (within STYLE tags)
• can apply to all elements, or a subclass of elements, throughout the page sible.
27
Document Style Sheets
<html>
<!–- CS443 page20.html 17.10.14 --> •document style sheets ensure that similar
<head>
<title>Document Style Sheets</title>
elements are formatted similarly
<style type="text/css">
h1 {color:blue; •can even define subclasses of elements and
text-align:center}
p.indented {text-indent:0.2in}
</style>
specify formatting
</head>
p.indented defines subclass of paragraphs
<body>
<h1> Centered Title </h1> • inherits all defaults of <p>
<p class="indented">This paragraph
will have the first line indented, but
• adds new features
to specify this newly defined class, place
subsequent lines will be flush. </p>

<p>This paragraph will not be


indented. class="ID" attribute in tag
</p>

<h1> The End </h1>

</body> •note how "clean" the <body> element is


</html>

view page 28
Document Style Sheets (cont.)
<html> •document style sheets are especially
<!–- CS443 page21.html 17.10.14 -->
useful in formatting tables
<head>
<title> Inline Style Sheets </title>
<style type="text/css">
table {font-family:Arial,sans-serif}
caption {color:red;
•effectively separates content from
font-style:italic;
text-decoration:underline}
presentation
th {background-color:red}
</style>
• what if you wanted to right-justify
</head>
the column of numbers?
• what if you changed your mind?
<body>
<table>
<caption> Student data. </caption>
<tr><th> name </th> <th> age</th></tr>
<tr><td> Chris Smith </td> <td> 19 </td></tr>
<tr><td> Pat Jones </td> <td> 20 </td></tr>
<tr><td> Doogie Howser </td> <td> 9 </td></tr>
</table>
</body>
</html>

view page

29
Pseudo-Elements
<html>
<!–- CS443 page23.html 17.10.14 --> •pseudo-elements are used to address sub-parts
<head> of elements
<title>Title for Page</title>
<style type="text/css">
a {color : red;
text-decoration : none; • can specify appearance of link in various states
font-size : larger}
a:visited {color : black} :visited :active :hover
a:active {color : orange}
a:hover {color : blue}
p:first-letter {font-size : large;
• can specify format of first line in page or
color : white; paragraph
background-color : darkblue}
</style> :first-line
</head>
• can specify format of first letter in page or
<body>
<p> Welcome to my Web page. I am so paragraph
happy you are here.
</p> :first-letter
<p> Be sure to visit
<a href="http://www.cnn.com">CNN</a>
for late-breaking news.
</p> •Danger : changing the look of familiar elements is
</body>
</html>
view page
confusing
30
External Style Sheets
• modularity is key to the development and reuse of software
• design/implement/test useful routines and classes
• package and make available for reuse
• saves in development cost & time
• central libraries make it possible to make a single change and propagate the changes
• external style sheets place the style definitions in separate files
• multiple pages can link to the same style sheet, consistent look across a site
• possible to make a single change and propagate automatically
• represents the ultimate in content/representation separation

31
Modularity & Style Sheets
<html>
<!–- CS443 page26.html 17.10.14 --> /* myStyle.css CS443 02.09.05 */

<head>
h1 {color : blue; text-align : center}
<title>Title for Page</title> p.indented {text-indent:0.2in}
<link rel="stylesheet"
type="text/css"
href="myStyle.css" •Ideally, the developer(s) of a Web site would
title="myStyle“ />
</head> place all formatting options in an external style
<body> sheet.
<h1>Centered Title</h1>
•All Web pages link to that same style sheet
<p class="indented">This paragraph
will have the first line indented, but for a uniform look.
subsequent lines will be flush.</p>
• simplifies Web pages since only need to
<p>This paragraph will not be
indented. specify structure/content tags
</p>
• Note: no <style> tags are used in the
<h1>The End</h1>
external style sheet
</body>
</html> view page
32
<div> and <span> Tags
• Problem: font properties apply to whole elements, which are often too large
• Solution: a new tag to define an element in the content of a larger element -
<span>
• <span> is an inline element used to mark up a part of text
<p> Now is the <span> best time </span> ever! </p>

• Use <span> to apply a document style sheet definition to its content


<style type = "text/css">
.bigred {font-size: 24pt;
font-family: Ariel; color: red}
</style>
§ The <span> tag is similar to other
... ...
<p> Now is the <span class="bigred">
HTML tags, they can be nested and
best time </span> ever! they have id and class attributes
</p>

view page 33
Outline
1. Basic HTML

2. HTML5

34
35
HTML5 New Tags
•HTML 5 specify DOCTYPE as follows: <!DOCTYPE html>
<!DOCTYPE html>
<html> •specify Character Encoding as follows: <meta charset="UTF-8">
<head> •New tags introduced in HTML5 for better structure
<meta charset="utf-8">
<title>…</title> • header − This tag represents the header of a section.
</head> • footer − This tag represents a footer for a section and can
<body> contain information about the author, copyright
<header>...</header>
information, etc.
<nav>...</nav>
<article> • nav − This tag represents a section of the document
<section>…</section> intended for navigation.
</article>
<aside>...</aside> • dialog − This tag can be used to mark up a conversation.
<figure>...</figure> • figure − This tag can be used to associate a caption together
<footer>...</footer>
with some embedded content, such as a graphic or video.
</body>
</html>
36
HTML5 New Tags
Header • section − This tag represents a generic
document or application section. It can be
Navigation used together with h1-h6 to indicate the
Section document structure.
Article
Footer
• article − This tag represents an
independent piece of content of a
Article document, such as a blog entry or
Aside Footer
newspaper article.
Article • aside − This tag represents a piece of
Footer
content that is only slightly related to the
rest of the page.
Footer
37
HTML5 New Tags
• HTML5 offers new elements for media content:

<audio controls="true">
<source src="audiodemo.ogg" />
<source src=" audiodemo.mp3" />
<source src=" audiodemo.wav" />
Not supported.
</audio>

<video src="video.ogv" controls poster="poster.jpg" width="320"


height="240"> <a href="video.ogv">Download movie</a>
</video>
38
HTML5 New Tags
• <canvas> element:

function draw() {
var ctx =
document.getElementById('canvas').getContext('2d');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
ctx.beginPath();
ctx.moveTo(30,96);
ctx.lineTo(70,66);
ctx.lineTo(103,76);
ctx.lineTo(170,15);
ctx.stroke();
}
img.src = 'images/backdrop.png';
}
39
HTML5 New Tags
• New input elements: month
button number
checkbox password
color radio
date range
datetime reset
datetime-local search
email submit
file tel
hidden text
image time
url
week

40

You might also like