Scribd
Upload
8 views

Lecture 2 HTML Tags

Uploaded by

maithsp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
8 views

Lecture 2 HTML Tags

Uploaded by

maithsp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Introduction to coding and web

design
Recap

 Introduction to internet
 Concept of Websites and webpages
 HTML
Objectives

 Text formatting
 Adding images
 Adding links
Text Formatting
 Manipulating text in HTML can be tricky; Oftentimes, what you see is NOT what
you get
 Rendering
 For instance, special HTML tags are needed to create paragraphs, move to the next
line, and create headings
<B> Warning </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<EM>Emphasized text</EM>
<strong>Content </strong>
<BR> Next Line
<pre> Preformatted text</pre>
<sub>Subscript text</sub>
<sup>Superscript text</sup>
Headings

 Web pages are typically organized into sections with headings; To


create a heading use the expression <Hn>….</Hn> where n is a
number between 1 and 7
 In this case, the 1 corresponds to the largest size heading while the 7
corresponds to the smallest size
 The ALIGN attribute can be inserted in the <P> and <Hn> tags to
right justify, center, or left justify the text
 For example, <H1 ALIGN=CENTER> The New York Times </H1>
would create a centered heading of the largest size
Example
To define the background color, use the BGCOLOR attribute in the <BODY> tag
To define the text color, use the TEXT attribute in the <BODY> tag

<html>
<head>
<title> Example </title>
</ head >
<body bgcolor=“pink” text=“black”>
<h1>
This is where you would include the text and images on your Web page.
</h1>
</body>
</html>
Comment Statements

 Comment statements are notes in the HTML code that explain the
important features of the code
 The comments do not appear on the Web page itself but are a useful
reference to the author of the page and other programmers
 To create a comment statement use the <!-- …. --> tags
8 HTML Lists

 Unordered List
 Ordered List
 Description List
formerly called a definition list
9
Unordered List

 Displays a bullet, or list marker,


before each entry in the list.

 <ul>
Contains the unordered list

 <li>
Contains an item in the list
10
Unordered List Example

<ul>
<li>TCP</li>
<li>IP</li>
<li>HTTP</li>
<li>FTP</li>
</ul>
Ordered List
11
 Displays a numbering or lettering system to
itemize the information contained in the list
 <ol>
Contains the ordered list
 type attribute determines numbering scheme of
list, default is numerals
 <li>
Contains an item in the list
12
Ordered List Example

<ol>
<li>Apply to school</li>
<li>Register for course</li>
<li>Pay tuition</li>
<li>Attend course</li>
</ol>
Description List
13

Useful to display a list of terms and descriptions or a list of FAQ and


answers

◦ <dl>
Contains the description list

◦ <dt>
Contains a term/phrase/sentence
Configures empty space above and below the text

◦ <dd>
Contains a description of the term/phrase/sentence
◦ Indents the text
◦ Configures empty space above and below the text
14
Description List Example

<dl>
<dt>IP</dt>
<dd>Internet Protocol</dd>
<dt>TCP</dt>
<dd>Transmission Control Protocol</dd>
</dl>
Inserting Images

 Type <IMG SRC = “image.ext”>, where image.ext indicates the location of the image file
 The WIDTH=n and HEIGHT=n attributes can be used to adjust the size of an image
 The attribute BORDER=n can be used to add a border n pixels thick around the image
 Some browsers don’t support images. In this case, the ALT attribute can be used to create
text that appears instead of the image.
 Example:
<IMG SRC=“satellite.jpg” ALT = “Picture of satellite”>
Links
 A link lets you move from one page to another, play movies and
sound, send email, download files, and more….
 A link has three parts: a destination, a label, and a target
 To create a link type
<A HREF=“page.html”> label </A>
 In the above link, “page.html” is the destination. The destination
specifies the address of the Web page or file the user will access
when he/she clicks on the link.
 The label is the text that will appear underlined or highlighted on
the page
Example: Links

 To create a link to CNN, I would type:


<A HREF=“http://www.cnn.com”>CNN</A>

 To create a link to MIT, I would type:


<A HREF=“http://www.mit.edu” target=_blank>MIT</A>
Note: Putting taget=_blank will make the web page open in a new tab
 The text between <a> and </a> is displayed on the pageWeb
<a href="contact.html"> Contact Us </a>
 Email link = link to an email. Launch automatically the program for default mailbox
configured for the Navigator
<a href="mailto:[email protected]"> [email protected] </a>
Anchors

 Anchors enable a user to jump to a specific place on a Web site


 Two steps are necessary to create an anchor. First you must create the anchor itself. Then
you must create a link to the anchor from another point in the document.
 To create the anchor itself, type <A NAME=“anchor name”>label</A> at the point in the
Web page where you want the user to jump to
 To create the link, type <A HREF=“#anchor name”>label</A> at the point in the text
where you want the link to appear
Example: Anchor

<A HREF="#chap2">Chapter Two</A><BR>


Link

Anchor
<A NAME="chap2">Chapter 2 </A>
Exercise

 Develop two pages about your favorite Hobby –Travelling/playing Sport / reading
Book/listening music
 The two pages should be linked to each other
 The pages should contain images and links to web sites
 The pages should contain the lists
 The pages should include various formatting styles for the page and text
 Be Creative!

You might also like