Scribd
Upload
3 views

basic html tags

The document provides an overview of the Internet, its protocols, and the World Wide Web, explaining how web browsers interact with web servers to display HTML pages. It details the structure and essential tags of HTML, including required tags like <html>, <head>, <title>, and <body>, as well as various other tags for formatting and linking. Additionally, it covers the use of CSS for styling, lists, and special characters in HTML.

Uploaded by

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

basic html tags

The document provides an overview of the Internet, its protocols, and the World Wide Web, explaining how web browsers interact with web servers to display HTML pages. It details the structure and essential tags of HTML, including required tags like <html>, <head>, <title>, and <body>, as well as various other tags for formatting and linking. Additionally, it covers the use of CSS for styling, lists, and special characters in HTML.

Uploaded by

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

Internet / Protocols / WWW

 What is the Internet?


 a network of networks – an inter-network, or Internet


What are Internet protocols?
 the rules for transferring information between programs
 HTTP - hypertext transfer protocol
 FTP - file transfer protocol
 SMTP – simple mail transfer protocol

 What is the World Wide Web?


 a set of HTML pages accessible using the HTTP protocol

1
How the WWW Works
How does a Web Browser (Firefox) fit in this picture?
- your browser connects, using the HTTP protocol, to a web server
- the web server fetches an HTML web page and sends the HTML to your browser
- your browser turns the HTML page into a nice-looking page on your screen

Internet
connection

Internet
Their computer,
Routers
Their web server /mypage.html
(an HTTP server)
Your computer, e.g. Apache
Your web browser Text file containing
e.g. Firefox an HTML web page

2
Hyper Text Markup Language - HTML
Hyper Text Markup Language (HTML) Basics
 HTML is a “mark-up language”
 You add the mark-up tags to your text document
 Now follows a published standard via http://w3c.org/
 HTML is a language of mark-up “tags” in angle brackets: <>
 each tag has a name and may have one or more quoted attributes
 eg. <p class=”thesis” style=”color: red”>
 Tags usually come in pairs (with some exceptions)
 <html>...</html>, <body>...</body>, <p>...</p>, <hr>, <br>
 Web pages are free-form input; line breaks can be used most
anywhere and don't affect the appearance of the document
 Yes, your entire page could be a single line of text!

3
HTML – Required Tags

 <html> … </html> (Required!)


 Basic tag to identify portion of file that contains HTML
 <html> is an opening tag
 </html> is a closing tag (note the direction of the slash!)
 text between the opening and closing tag is called the “element”

 <head> … </head> (Required!)


 placed at the top of document immediately after the <html> tag
 tags information about the document, e.g. author, style, etc.
 contains the required document <title>...</title> tag

4
HTML – Required Tags

 <title> … </title> (Required!)


 included as an element inside the <head>…</head> section
 element of this tag is the title displayed in title bar of the browser
 may also be used as title of page when page is bookmarked
 should be meaningful and uniquely identify the page

 <body> … </body> (Required!)


 included as the second element inside the <html>…</html> tags.
 follows the <head>…</head> portion of the document
 contains the information to be displayed in the browser window
 any attributes set on this tag will apply to the entire page

5
HTML – Required Tags

 <p> … </p> (Required!)


 included as an element inside the <body>…</body> section
 Surrounds a paragraph of text
 DOCTYPE (Required!)
 Must be the very first line of your file, before <html>
 NOT an HTML tag; it is an instruction to your web browser
 Tells the browser what version of HTML to expect
 In this course we use only the “strict” HTML version 4.01 type:

<!DOCTYPE HTML PUBLIC


"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

6
HTML – Required Tags
 That's all you need for a basic web page!
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My Title</title>
</head>
<body>
<p>This is my first web page.</p>
</body>
</html>
7
HTML - Basic Tags

More useful basic tags:


 <br> (no closing tag needed)
 put a line break in the text (starts a new line)
 <h1> … </h1> through <h6> ... </h6>
 used to identify text as a Level 1 (major) to Level 6 (minor) heading

Comment Tag
 <!-- comments here -->
 notice that the comment is typed as an attribute inside the tag
 comments may be one or multiple lines long (HTML is free-form)
 text within this tag will not be displayed or processed by your browser
 comments do not nest! No comments inside comments!
 The comment may not contain two (or more) adjacent dashes, e.g. --

8
HTML - Basic Tags
The Anchor Tag – Hyper Linking - making the web a web
 <a> … </a>

 one major attribute – the location of the hyperlink:


 href=”string”
 element is clickable/selectable as a document hyperlink
 browser attempts to load the page specified by the href= attribute
 the href= string can be a relative URL on the same server:
 without the leading http://host/ it is in the same directory structure:
 e.g. <a href=“page2.html”>Click here to continue</a>
 e.g. <a href=”images/box.jpg”>See the box here.</a>
 e.g. <a href=“../another_dir/page3.html”>Click here</a>

9
HTML - Basic Tags
 <a>…</a> anchor tag continued

 The href= string can be an absolute URL on any server:


 string can be any HTTP URL (web address) you like:
 e.g. <a href=“http://www.gnu.org/philosophy/”>Free Software</a>

 The href= string can be an email address:


 string can be an email address preceded by “mailto:”
 e.g. <a href=”mailto:[email protected]>Ian! D. Allen email</a>
 Attempts to open an email client (specified in the web browser's
options) and places the specified email address in the To: field of a
new email message.

10
HTML - Basic Tags

 <img> (no closing tag needed)


 used to display graphics (.jpeg, .png, .gif) in your web pages
 you must specify the URL for the image source, and an alt= text
 the basic attributes of <img> are:
 src=”string” - the absolute or relative location of the image file
 alt=”string” - Alternate Text for people who don't see images
 height=”string” - image height, percent or absolute pixels (optional)
 width=”string” - image width, percent or absolute pixels (optional)
 title=”string” - mouse-over title of the image (optional)
 Etc….
 specifying height= and width= lets your browser reserve space in
the document to load the image in the background and avoid
redrawing the page after the image is fully loaded

11
HTML - Basic Tags
• <hr> (no closing tag needed)
– Hard/Horizontal Rule – draw a horizontal line
– rule appearance can be changed with styles
• <blockquote> … </blockquote>
– block quotation, indented
• <q> … </q>
– a short, in-line “quotation as part of running text”
• <pre> … </pre>
– preformatted text (e.g. computer code or output)
– fixed-width font (e.g. Courier fixed width)
– preserves spaces and line breaks

12
HTML - Basic Tags
• Font-style tags – for more control, use CSS instead

• <b> … </b> and <i> … </i>


– bold and italic text (in-line)

• <tt> … </tt>
– Teletype Text: fixed-width font (e.g. Courier)

• <big> … </big> and <small> … </small>


– bigger and smaller text (in-line)

13
HTML - Phrase Tags
Phrase tags – often better done using CSS

• <em> … </em> and <strong> ... </strong>


– text to be emphasized and strongly emphasized
– browser decides how: usually italicized, made bold

Less often used:


• <code>...</code>, <samp>...</samp>, <kbd>...</kbd>
– computer code, sample code, keyboard text
– usually rendered in Courier fixed-width
font

14
HTML – Style Element/Attribute
The <style> element and the style= attribute
• The style= attribute can be used on most tags
– defines features for a single HTML element, e.g.
<p style=”text-align: center”>Center me.</p>

• The <style> element: <style type=”text/css”> ... </style>


– <style> tag always goes in the <head> section
– defines style information for the whole HTML page
– requires the type=”text/css” attribute
– more details to come in the description of CSS
– to link to a separate CSS style sheet, use instead:
<link rel=”stylesheet” type=”text/css” href=”string”>

15
HTML - Lists
Lists – <ul> Unordered List and <ol> Ordered List

<ul> <ol>
<li>Apple</li> <li>Apple</li>
<li>Pear</li> <li>Pear</li>
<li>Kiwi</li> <li>Kiwi</li>
<li><ul> <li><ul>
<li>Big</li> <li>Big</li>
<li>Small</li> <li>Small</li>
</ul></li> </ul></li>
</ul> </ol>
List attributes
• UNNUMBERED AND NUMBERED LISTS
BEGIN WITH
• <UL> </UL> AND <OL></OL> TAGS
• AND THEN USES <LI>
• TYPE= CIRCLE
• TYPE=SQUARE
• TYPE=DISC
• START=5 TYPE=‘i’

• LISTS MAY ALSO BE NESTED


HTML
HTML
– Unordered
- Basic Tags
Lists
• <li>…</li>
– List Item: surrounds each list item inside a list
– used inside both <ul> and <ol> list types

• <ul>…</ul>
– surrounds an unordered list – no numbering
– <li>...</li> items each indented and bulleted
– use styles (style= attribute) to change type of bullet:
– CSS style: list-style-type: string
• string can be: circle, disc, square
• e.g. <ul style=”list-style-type: square”> ... </ul>

18
HTML – Ordered Lists
• <ol> … </ol>
– surrounds an ordered list
– items are indented and numbered (or alphabetized)
– use styles (style=) to change type of numbering:
– CSS style: list-style-type: string
• examples of string: decimal, lower-alpha, upper-roman
• e.g. <ol style=”list-style-type: upper-latin”> ... </ul>
– the start= attribute determines first item's value
• e.g. <ol start=“3”> - begin numbering at 3 (or c, or iii)
• but this is deprecated, with no CSS replacement!

19
HTML – Definition List
• <dl>…</dl>
– definition list containing <dt> and <dd> items
– <dt>...</dt> definition title
– <dd>...</dd> definition description
• Example definition list containing two definitions:
<dl>
<dt>Hacker</dt>
<dd>An expert or enthusiast of any kind.</dd>
<dt>Cracker</dt>
<dd>An intruder into computer systems.</dd>
</dl>

20
HTML - <meta> - Page Attributes
• <meta> (no closing tag needed)
– used only inside <head> section of page
– gives details about page, e.g. author, keywords
– search engines may ignore keywords, since many
pages use fake keywords to boost search results
<head>
<title>Web Design Course Homepage</title>
<meta name="Keywords" content=”Fundamentals, HTML, CSS”>
<meta name="Description" content=”An introductory course
dealing with computer and Internet fundamentals.">
<meta name="GENERATOR" content="Arachnophilia 5.4">
</head>

21
HTML - <meta> - continued
• elements of <meta> include:
– name=string identifies what type of meta content will follow
– content=string details relating to the name

• <meta> can also be used to have your page automatically


load another web page after a short delay:
<meta http-equiv="refresh" content="10; url=index.html">
– note the attribute name: http-equiv=”refresh”
– the content= string begins with number of seconds
before next page is loaded, followed by a
semicolon, then url= giving the URL of the next
page to be loaded

22
HTML – Identify/Group Tags
Identifying and Grouping elements (e.g. for CSS)
• <div>...</div>
– division or section
– groups and identifies one or more block-elements
– usually causes a line break before and after

• <span>...</span>
– groups and identifies in-line elements (e.g. words)
– no visual change by itself (no line break)
– used to apply styles to parts of a text line, e.g.
This <span style=”color: red”>red</span> apple.

23
HTML – Entities (Special Characters)
HTML Entities – for special characters, accents, foreign
– starts with ampersand and ends with semicolon

&nbsp; non-breaking-space – acts like a letter


– words connected with &nbsp; will not separate
across a line break; they stay together as one word
– e.g. Mr.&nbsp;Ian!&nbsp;D.&nbsp;Allen
&lt; (less than) = < &gt; (greater than) = >
&quot; (double quote) = " &apos; (apostrophe) = '
&amp; (ampersand) = &
– many, many others!

24
Tag Attributes
• The structure of an HTML tag may contain one or more
attributes like this:
– <tag>
– <tag attribute=“value”>
– <tag attribute=“value” attribute=“value”>

• To display a horizontal line


– < HR SIZE=4 WIDTH=“50%” >
– <HR SIZE=4 NOSHADE>

6-25
Align Attribute

<P align="center">
– Centers a paragraph
<P align="right">
– Right-aligns a paragraph
<P align="left">
– Left-aligns a paragraph (the default setting)
Align works the same on header tags
<H1 align="center">
<H2 align="center">
And so on
<p><font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>
6-26
Page Properties
Attributes for BODY Tag
– text
• Color for the text in the page
– bgcolor
• Background color for the page
– Foreground
• <body text=color>
– link
• Color for the hypertext links
– vlink
• Color for the visited links
– alink
• Color for the active link
BACKGROUND=“URL”
 Specifies the relative or absolute location of an image file that tiles
across the document’s background. 6-27
LEFTMARGIN=“n”
 Specifies the width (in pixels) of a margin of white space
along the left edge of the entire document.

TOPMARGIN=“n”
 Specifies the size (in pixels) of a margin of white space along
the top edge of the entire document.

SCROLL=“YES, NO”
 Indicates whether scrolling is possible within the document
body.
Colors in HTML
• Common names: “red,” “purple,” “gray,” etc
• Hexadecimal triplets
• Red, Green, and Blue are written as:#RRGGBB
• For example:
– White is #FFFFFF, black is #000000, and yellow would
be #FFFF00

You might also like