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:monNom@gmail.com"> monNom@gmail.com </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!
