Scribd
Upload
3 views

Lecture 4

This is Lecture note-5

Uploaded by

Kirubel
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
3 views

Lecture 4

This is Lecture note-5

Uploaded by

Kirubel
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

LECTURE 4

Basic HTML Tags


<>
STATIC WEB PAGE DEVELOPMENT

 HyperText Markup Language (HTML) is the


language for specifying the static content of Web
pages
 hypertext refers to the fact that Web pages are more
than just text
 can contain multimedia, provide links for jumping within &
without
 Document is parsed by browser

 markup refers to the fact that it works by augmenting


text with special symbols (tags) that identify structure
and content type
HTML DEVELOPMENT TOOLS

 many high-level tools exist for creating Web


pages
e.g., Microsoft FrontPage, Netscape Composer, Mozila
plugins, Macromedia DreamWeaver,Eclipse,
Notepad++…
also, many applications have "save to HTML" options
(e.g., MS Word)
HTML IS AN EVOLVING STANDARD
 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 was developed by the Internet Engineering Task
Force HTML Working Group in 1996.
- is an outdated version of HTML.
- For a Web developer there is no need to study the HTML 2.0 standard.
 HTML 3.2
- -became a W3C Recommendation 14. January 1997. HTML 3.2
added new features such as fonts, tables, applets, superscripts,
subscripts and more, to the existing HTML 2.0 standard.
 HTML 4.01
-HTML 4.01 became a W3C Recommendation 24. December 1999.
 XHTML 1.0, XHTML 1.0, XHTML 1.0
 HTML 5
-new features in HTML 5 are embedding audio, video, graphics,
client-side data storage, and interactive documents.
-HTML 5 also contains new elements like <nav>, <header>,
<footer>, and <figure>.
BASIC HTML TAGS
 Tags
 These can be either a start or an end tag.

These are used to denote the start of an


element - e.g. a paragraph opening tag:
<p>
or the end of an element - e.g. a paragraph
end tag:

</p>
BASIC HTML TAGS
HTML documents begin and
 <HTML> end with <html> and </html>
tags
 <HEAD>
Comments appear between <!--
 <TITLE> test and -->
page</TITLE>
HEAD section enclosed
 </HEAD> between <head> and </head>

 <BODY> BODY section enclosed


between <body> and </body>
 <H1> Hello World </H1>
 <! Rest of page goes here. This
is a comment. >
 </BODY>
 </HTML>
HTML documents will be saved with an extension of
html or htm
BASIC HTML TAGS
 an HTML document has two main sections
 HEAD contains setup information for the browser & the Web page
 e.g., the title for the browser window, style definitions, JavaScript code, …
 Mostly Search engines use this section to access information
BODY SECTION
BODY contains the actual content to be displayed in the Web page
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.
HTML documents will be saved with an extension of html or htm

<html> HTML documents begin and end


<!-- comment Internet with <html> and </html> tags
Programing 2010 -->
<!-- Demo web page Comments appear between <!-- and
--> -->
<head>
<title>Title for HEAD section enclosed between
Page</title> <head> and </head>
</head>
<body> BODY section enclosed between
The content of the page is <body> and </body>
writen at this section
</body>
</html>
ATTRIBUTES OF BODY TAG
Tag Attributes

 Used to configure tags


 Placed before closing bracket of opening tag

<tag attribute=“value”>some text</tag>

Attributes of body tag


TAGS VS. ELEMENTS

 HTML specifies a set of tags that identify


structure and content type
 tags are used to mark up HTML elements.
 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


 HTML is not case sensitive
Tags vs. elements(cont'd)

11
TEXT LAYOUT
<html> for the most part, layout of the text

<!-- comment Internet Programing 2010


-->
must be left to the browser

every sequence of white space is
<head> interpreted as a single space
<title>Text Layout</title>
</head>

browser automatically wraps the text to
fit the window size
<body>
<p>
This is a paragraph of text<br/>
made up of two lines. can override some text layout

</p>

can cause a line break using the <br/>
<p>
tag (no closing tag)
This is another paragraph with a
&nbsp; GAP &nbsp; between 
can specify a new paragraph (starts on
some of the words.
a new line, preceded by a blank line)
</p>
using <p>…</p>
<p>
&nbsp;&nbsp; This paragraph is<br/>

can force a space character using the
indented on the first line<br/> symbol for a non-breaking space:
but not on subsequent lines. &nbsp;
</p>
</body>

</html>
SEPARATING BLOCKS OF TEXT
<html> can specify headings for
<!-- comment Internet Programing 2010--
paragraphs or blocks of text
>
<head>  <h1>…</h1> tags produce a large,
<title>Blocks of Text</title>
</head> bold heading
 <h2>…</h2> tags produce a
<body> slightly smaller heading
<h1>Major heading 1</h1>  ...
<p>
Here is some text.
 <h6>…</h6> tags produce a tiny
</p> heading

<h2>Subheading</h2>
<p> can insert a horizontal rule to
Here is some subtext. divide sections
</p>
<hr/>  <hr/> draws line across window
<h1>Major heading 2</h1>
<p>
 <hr width="50%" /> sets width
Here is some more text.  <hr size=10 /> sets thickness
SEPARATING BLOCKS OF TEXT
 HTML allows you to omit the (start or) end
tags when it is obvious where the element
(begins or) ends.
 For instance, consider

 <p>Some text <p>

 <ul> <li>A list item

 <li>Another list item

 </ul> This is precisely equivalent to

 <p>Some text</p>

 <p>Some more text</p>

 <ul> <li>A list item</li> <li>Another list

item</li> </ul>
 We can omit the closing </p> tags and </li>
ALIGNING TEXT
<html>
<!-- comment Internet Programing 2010 -->
<!-- Demo web page -->
can specify
<head>
<title>Text Alignment</title> how elements
</head> should be
aligned (default
<body>
<h1 style="text-align:center">Centered is left-justified)
Heading</h1>  utilize STYLE
<p>
Here is some left-justified text attribute of
(which is the default in HTML). tag
</p>
to justify more
<p style="text-align:center"> than one
Here is some centered text.
</p>
element as a
group, use DIV
<div style="text-align:right"> tags
<h2>Right-justified Heading</h2>
<p>Here is some right-justified text.</p>
 elements
</div> enclosed in
</body>
DIV are
</html> formatted
similarly
TEXT STYLES can specify styles for fonts
<html> <b>… </b> specify bold
<!-- comment Internet Programing 2010 -->
 <i>… </i> specify italics
<!-- Demo web page -->
 <tt>… </tt> specify typewriter-
<head> like (fixed-width) font
<title>Text Styles</title>
</head>
<big>… </big> increase the size of
the font
<body>  <small>… </small> decrease
<p> the size of the font
Text can be emphasized using
<b>bold</b>, <i>italics</i>, or even
<sub>… </sub> specify a subscript
<big>resizing</big>. <br/>  <sup>… </sup> a superscript
The typewriter font is good for <p style="color:red">…</p> for
displaying code:
paragraphs
<tt>sum = sum + i;</tt> <br />
And remember: <span style="color:red">  <span style="color:blue">
<small> 2<sup>10</sup></small> = …</span> for inline text
1024</span>
</p> Note: if elements are nested, the
</body> order of opening/closing is
important!
</html>
MORE TEXT GROUPING
<html>
<!-- comment Internet Programming 2010 -->  <pre>…</pre> specify text
<head> that is to be displayed
<title>More Text Grouping</title>
</head>
as is (line breaks and
spacing are preserved)
<body>
<p>
useful for code or whenever you
<tt><pre> want text to fit a specific
for (i = 0; i < 10; i++) { layout
sum = sum + i;
}
</pre></tt>  <blockquote>…</
</p>
blockquote> specify text
<p>
Eagleson's Law states that: that is to be indented on
<blockquote> both margins
Any code of your own that you haven't
looked at for six or more months useful for quotations or for
might as well have been written by indenting text in subsections
someone else.
</blockquote>
</p>
</body>

</html>
LISTS
<html>
<!-- comment Internet Programing 2010 there are 3 different
-->

<head>
types of list elements
<title>Simple Lists</title> <ol>…</ol> specifies an
</head>
ordered list (using
<body> numbers or letters to label
<p> each list item)
<ol> 
<li> identifies each list item
<li>First item.
<li>Second item.
can set type of ordering,
<li>Third item. start index
</ol>
</p>

<ul>…</ul> specifies
unordered list (using a
<p> bullet for each)
<dl>
<dt>HTML

<li> identifies each list item
<dd>HyperText Markup Language <dl>…</dl> specifies a
<dt>HTTP
<dd>HyperText Transfer Protocol
definition list
</dl> 
<dt> identifies each term
</p> 
<dd> identifies its definition
</body>

</html>
HYPERLINKS  the most important
HTML element is the
<html>
<!-- comment Internet Programing 2010 -- hyperlink, or ANCHOR
>
<a href="URL">…
<head>
<title>Hyperlinks</title>
</a>
</head>  where URL is the Web
<body> address of the page to be
<p> displayed when the user
<a href="http://www.creighton.edu">
Creighton University</a>
clicks on the link
<br> if the page is accessed
<a href="page07.html" target="_blank"> over the Web, must start
Open page07 in a new window</a>
</p> with http://
</body> if not there, the browser

</html>
will assume it is the name
of a local file
<a href="URL"

target="_blank">…</a>
causes the page to be

loaded in a new window


HYPERLINKS (CONT.)
<html> for
<!-- comment Internet Programing 2010 -- long documents, you
> can even have links to
<head> other locations in that
<title>Internal Links in a
Page</title> document
</head>
<a name="ident">…</a>
<body> where ident is a variable for
<p align="center">
[ <a href="#HTML">HTML</a> |
identifying this location
<a href="#HTTP">HTTP</a> |
<a href="#IP">IP</a> |
<a href="#ident">…
<a href="#TCP">TCP</a> ] </a>
</p>
<p>
will then jump to that
Computer acronyms: location within the file
<dl>
<a name="HTML"></a><dt>HTML <a
<dd>HyperText Markup Language href="URL#ident">…
<a name="HTTP"></a><dt>HTTP
<dd>HyperText Transfer Protocol </a>
<a name="IP"></a><dt>IP can jump into the middle of
<dd>Internet Protocol
<a name="TCP"></a><dt>TCP another file just as easily
<dd>Transfer Control Protocol
</p>
</body>
</html>
IMAGES
can include images using IMG
 by default, browsers can display GIF and JPG files
 other image formats may require plug-in applications for display

<img src="filename" alt="alternate text" />


again, if file is to be accessed over the Web, must start with http:// (if not, will assume local
file)

<html>

<head>
<title>Images</title>
</head>

<body>
<div style="text-align:center">
<img
src="http://www.creighton.edu/~davereed/Images/reed.gif"
alt="Dave Reed" />
<p>Dave Reed</p>
</div>
</body>
</html>
TABLES

 tables are common tools for arranging complex layout on a Web page
 a table divides contents into rows and columns
 by default, column entries are left-justified, so provide for alignment

<html>
<!-- comment Internet Programing 2010 --
>

<head> <table>…</table> specify a table


<title>Tables</title> element
</head>

<body> <tr>…</tr> specify a row in the table


<table>
<tr>
<td>…</td> specify table data (i.e., each
<td>foo</td> <td>bar</td>
</tr> column entry in the table)
<tr>
<td>bizbaz</td> <td>booboo</td>
</tr>
</table>
</body>
</html>
TABLE ATTRIBUTES
 Border === table,tr,td
 Cellpadding ==== table
 Cellspacing ==== table
 width ,height ==== table, td,tr
 Align ==== table, tr, td
 Valign ==== table, tr, td
 Rowspan ===== td
 Colspan ==== td
 Bgcolor ==== table.,tr, td
LAYOUT IN A TABLE can have a border on tables
<html> using the BORDER attribute
<!-- comment Internet Programing 2010
--> <table border=1>
increasing the number makes the border
<head> thicker
<title>Table Layout</title> can control the horizontal &
</head>
vertical layout within cells
<body> <td align="center">
<table border=1> <td align="right">
<tr align="center"> <td valign="top">
<td>foo<br>foo</td> <td valign="bottom">
<td valign="top">bar</td>
</tr>
can apply layout to an entire
<tr> row
<td>bizbaz</td> <tr align="center">
<td>booboo</td> <tr valign="top">
</tr>
</table>
</body>
</html>
TABLE WIDTH
<html>
<!-- comment Internet
Programing 2010 --> by default, the table is
sized to fit the data
<head> can override & specify
<title>Table
Width</title> the width of a table
</head> relative to the page
 <table width="60%">
<body> useful for page footer –
<table width="100%">
set table width to 100%
<tr>
<td>left-most 1st column: left-justified
<td 2nd column: right-justified
align="right">right-most</t
d>
</tr>
</table>
</body>
</html>
OTHER TABLE OPTIONS can control the
<html> space between cells
<!-- Dave Reed page14.html 1/16/04 -->
& margins within
<head> cells
<title>Table Formatting</title>  <table
</head>
cellspacing=5>
<body>  <table
<table border=1 cellspacing=4 cellpadding=8>
<tr>
cellpadding=5>
<th>HEAD1</th> <th>HEAD2</th> can add headings
<th>HEAD3</th>
</tr>
 <th> is similar to
<tr> <td> but displays
<td>one</td> <td>two</td> <td>three</td> heading centered in
</tr>
<tr>
bold
<td rowspan=2 align="center"> four </td> can have data that
<td colspan=2 align="center"> five </td>
spans more than one
</tr> column
<tr>
<td colspan=2>
<td> six </td> <td> seven </td>
</tr> similarly,
can span
</table>
</body> more than one row
</html> <td rowspan=2>
CREATING RULES
 The rules attribute lets you control how the
table gridlines are drawn (not supported by
Netscape)
 The syntax of the rules attribute is:

<table rules=“type”>
 type is either “all”, “rows”, “cols”, or “none”
FRAMES
 frames provide the ability to split the screen into
independent pages
 must define a FRAMESET that specifies the layout of the
pages
 actual pages to be displayed must be in separate files

can divide vertically


<html>
<!-- comment Internet Programing 2010 --> <frameset cols="50%,50%">

<frameset cols="*,*">
<frame src="page01.html"> or, horizontally
<frame src="page02.html"> <frameset rows="30%,*,*">
</frameset>

</html> * causes the browser to divide the


remaining space evenly

by default, each frame scrollable


• can drag the border to resize
• can hide the border with frameset
attribute frameborder=0
FRAME CONTROVERSY

 frames are probably the most controversial


HTML feature
 some people love them, some people hate them
2 reasonable uses for frames
 as a navigational aid:
can divide the screen into a static menu frame and the
main frame for navigating a site
as a means of separating program input from
output:
can divide the screen into a static man input form frame
and the main frame for displaying output
MENU FRAME
to create a menu, need to be able <html>
to direct links to the main frame <head>
<title>Menu of Demos</title>
 name the frames in the </head>
FRAMESET
 specify the frame name as <body>
TARGET in the link Links to demo pages
<p>
 specify _top as target to return to
<a href="page01.html"
top level of browser
target="main">Demo 1</a><br/>
<a href="page02.html"
<html> target ="main">Demo 2</a><br/>
<!-- comment Internet Programing 2010 -- <a href="page03.html"
> target ="main"> Demo 3</a><br/>
<a href="page04.html"
<head> target ="main"> Demo 4</a><br/>
<title>Demo Browser</title> <a href="page05.html"
</head> target ="main"> Demo 5</a><br/>
<a href="page06.html"
<frameset cols="30%,*"> target ="main"> Demo 6</a><br/>
<frame src="menu16.html" <a href="http://www.creighton.edu"
name="menu"> target="_top" >Creighton</a>
<frame src="page01.html" </p>
name="main"> </body>
</frameset> </html>
</html>

You might also like