Scribd
Upload
10 views

Lecture 4

Web development basics

Uploaded by

majesty
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

Lecture 4

Web development basics

Uploaded by

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

Web Design using HTML

Lecture 2
Recap of last lecture
• IP addressing
– What are the two types of addresses any device
connecting to the internet can use?
– What are the two types of IP addresses and what
is their major difference?
– How many classes of addresses are found in the
IPv4 type?
This Lecture
• Steps in creating a website
• Principles of good web design
• Web design using HTML
– Basic structure of an html webpage
– Saving a webpage
– Other elements used in web design
– Modifying elements using attributes
– Creating a hyperlink
Creating a Web Site
1. Choose a domain name
2. Register with a Registrar
3. Choose a hosting service
4. Tell Registrar the IP address
5. Create web content
6. Store (publish) onto hosting server (FTP)
7. Submit new site to search engines

4
Principles of good web design
1. Visitor-centric, clear purpose
2. Displays quickly
3. Browser compatible
4. Intuitive navigation
5. Spelling, grammar, writing
6. Secure (eCommerce)
7. Attractive design, easy to read
8. No cultural bias (Regional? Domestic? International?)
9. No technical problems (broken links, buggy scripts)
10. Maintainable (separate content from style)
11. Search Engine Accessible

5
What is HTML
• HTML is a language, which makes it possible
to present information (e.g. scientific
research) on the Internet.
– What you see when you view a page on the
Internet is your browser's interpretation of HTML.
• To see the HTML code of a page on the
Internet, simply click "View" in the top menu
of your browser and choose "Source".
• Used to make websites
HTML is an abbreviation of "HyperText
Mark-up Language"
• Hyper is the opposite of linear: when the program had
executed one action it went to the next line and after that,
the next line and so on.
• But HTML is different - you can go wherever you want and
whenever you want.
– For example, it is not necessary to visit gmail.com before you
visit inbox.
• Text is self-explanatory.
• Mark-up is what you do with the text. You are marking up
the text the same way you do in a text editing program
with headings, bullets and bold text and so on.
• Language is what HTML is.
Elements and Tags
• Elements give structure to a HTML document and
tells the browser how you want your website to
be presented.
• Generally elements consists of a start tag, some
content, and an end tag.
• Tags are labels you use to mark up the begining
and end of an element.
• All tags have the same format: they begin with a
less-than sign "<" and end with a greater-than
sign ">".
• there are two kinds of tags - opening tags: <html>
and closing tags: </html>.
Example 1
• <em>Emphasised text.</em>
• the element em emphasises text. All text
between the opening tag <em> and the
closing tag </em> is emphasised in the
browser. ("em" is short for "emphasis".)
Example 2
• <h1>This is a heading</h1>
• <h2>This is a subheading</h2>
• The elements h1and h2 is used to make
headings (h stands for "heading"), where h1 is
the first level and normally the largest text, h2
is the second level and normally slightly
smaller text, and h6 is the sixth and last in the
hierarchy of headings and normally the
smallest text.
Creating a Website
What you need
• a browser
• and Notepad (or similar text editor)
Basic Structure of a Webpage
<html>
<head>
</head>

<body>
</body>
</html>
• your HTML document has two parts: a head and a
body.
– In the head section you write information about the
page, while the body contains the information that
constitutes the page.
• For example, if you want to give the page a title
which will appear in the top bar of the browser, it
should be done in the "head" section.
– The element used for a title is title. I.e. write the title of
the page between the opening tag <title> and the closing
tag </title>
• Note that this title will not appear on the page itself. Anything you
want to appear on the page is content and must therefore be
added between the "body" tags.
• The title is especially important because it is used by search
engines (such as Google) to index your website and is shown in
the search results.
• we want the page to say “Hello World! This is
my first website”.
• Since this is the text that we want to
communicate, it therefore belongs in the body
section.

<p>Hello World! This is my first website.</p>


The p in <p> is short for "paragraph" which is exactly
what it is - a text paragraph.
First Website Text
<html>
<head>
<title>My first website </title>
</head>

<body>
<p>Hello World! This is my website.</p>
</body>

</html>
Saving
• In Notepad choose "Save as..." under "File" in
the top menu.
• Choose "All Files" in the "Save as type" box.
This is very important - otherwise, you save it
as a text document and not as an HTML
document.
• Now save your document as “filename.htm“
or .html
• In the body section, you write the actual
content of the page.
– You already know some of the most important
elements:
<p>Is used for paragraphs.</p>
<em>Emphasis text.</em>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
More Elements
• <strong> stronger emphasis </strong>
• <small>making text small.</small>
• Some text<br /> line break. (opened and closed
in same tag-empty tags)
– <hr /> (horizontal rule)
• ul is short for "unordered list" and inserts bullets
for each list item.
• ol is short for "ordered list" and numbers each list
item.
– To make items in the list use the li tag ("list item").
Enhanced First Website Text
<html>

<head>
<title>My website</title>
</head>

<body>
<h1><strong>BBM&IT</strong></h1>
<br />
<p>Part 3, Second Semester, Block Release</p>
<h2>Faculty</2>
<p><em><strong>TTE, NUST, BULAWAYO</em></strong></p>
<hr />

<p>Courses Offered</p>
<ul>
<li>Web Design</li>
<li>Data Structures and Algorithms</li>
</ul>

</body>

</html>
Attributes
• An attribute is more information added to an
element
e.g. <h2
style="background-color:#ff0000;">Hie</h2>
• Attributes are always written within a start tag
and are followed by an equals sign and the
attribute details written between inverted
commas.
– The semicolon after the attribute is for separating
different style commands.
• Each colour has its own hexadecimal number.
Here are some examples:
– White: #ffffff
Black: #000000 (zeros)
Red: #ff0000
Blue: #0000ff
Green: #00ff00
Yellow: #ffff00
• You can also use the English name for the
most common colours (white, black, red, blue,
green and yellow).
Links
• A hyperlink (or link) is a word, group of words, or
image that you can click on to jump to another
document.
• When you move the cursor over a link in a Web
page, the arrow will turn into a little hand.
• The most important attribute of the anchor <a>
element is the hypertext reference “href”
attribute, which indicates the link's destination.
e.g. <a href="http://www.nust.ac.zw/">Visit
University Website</a>
• The "Link" doesn't have to be text.
– It can be an image or any other HTML element.
HTML Links - The target Attribute

• The target attribute specifies where to open the


linked document.
• The example below will open the linked document
in a new browser window or a new tab:

<a href="http://www.cuz.ac.zw/" target="_blank">Visit University Website!</a

You might also like