Scribd
Upload
11 views41 pages

Lec8-Website Design

Introduction to computer

Uploaded by

darwishailesi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views41 pages

Lec8-Website Design

Introduction to computer

Uploaded by

darwishailesi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 41

Understanding Computers: Today and Tomorrow, 13th Edition

CC111
Introduction to Computers
Lecture 8

Website Design
Objectives

• The student should be familiar with the


Basics of website design

• The student should be able to design a


simple webpage

CC111: Website Design 3


Contents

• What is HTML?
• How to create and View an HTML
document?
• Basic HTML Document Format
• The HTML Basic tags

CC111: Website Design 4


Web Terminology

 Web server: a system on the internet hosting one or


more web sites
 Web site: a collection of one or more related web
pages
 Web page: a single disk file with a single file name
 Home page: the first page in a website

CC111: Website Design 5


Think about the following before working
your Web pages.
 Think about the sort of information(content) you want
to put on the Web.
 Set the goals for the Web site.
 Organize your content into main topics.
 Come up with a general structure for pages and
topics.

CC111: Website Design 6


Hypertext Mark-up Language (HTML)

• HTML is the standard mark-up language


used to create and organize documents
on the World Wide Web;
• HTML allows users to format text, add
graphics, sound, video, and save it all in
a TextOnly or ASCII format that any
computer can read.

CC111: Website Design 7


Basic HTML Document Format

<HTML> See what it


<HEAD> looks like:
<TITLE>WENT'99</TITLE>
</HEAD>
<BODY>
Went'99
</BODY>
</HTML>

CC111: Website Design 8


HTML Rules

• Case insensitive
• Spacing:
Browsers ignore extra spaces
<p>
Wide open
Wide open spaces!
spaces!
</p>
• Block-level tags include automatic line breaks
– Examples: P, H1, UL, TABLE

CC111: Website Design 9


HTML Tags

• < tag name >


• Example: <p> (indicates the beginning of a new
paragraph)
• Most tags come in matched pairs
– Opening tag (start tag): <p>
– Closing tag (end tag): </p>
• A full paragraph would look like this:
<p> Hello, World! </p>
• Empty tags are elements that do not hold any content
– Self closed at the end of the tag using a trailing slash
(/)
– Example: <br /> , <img />
CC111: Website Design 10
Attribute Values

• Attributes can accept the values of particular


types
• Values of attributes should be enclosed in
straight quotation marks
• “” may be omitted if the value contains only
letters, digits, hyphen (-), and period (.)

CC111: Website Design 11


HTML Attributes

<form action="/action_page.php">
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

CC111: Website Design 12


Nesting Tags

 Hierarchy – tags that affect entire paragraph


may contain tags affecting individual words or
letters
 Order – the current closing tag should correspond
to the last unclosed opening tag
Correct:
<H1> Information <I>System</I></H1>
Incorrect:
<H1> Information <I>System</H1></I>

CC111: Website Design 13


Nesting Elements

• Elements must be nested correctly

– <p><em>Hello, World!</p></em> Invalid

– <p><em>Hello, World!</em></p> Valid

CC111: Website Design 14


The html Element
• It acts as a container for the entire document and is
known as the root element
<html>
It Defines <head>
Where the <title>My first web
Document page</title>
Begins </head>
and End <body>
<p>It is easy to use
HTML</p>
</body>
</html>
• Any elements or contents that appear outside this
element will make the entire document invalid
CC111: Website Design 15
It Contains <html>
Information <head>
about the <title>My first web page</title>
Document </head>
Itself
<body>
<p>It is easy to use HTML</p>
It Contains All </body>
the Content of </html>
the Document

CC111: Website Design 16


The HEAD Section

<HEAD> - beginning of the head


section
<TITLE> - page description
</TITLE> - end of title
<!-- Script or comment may be placed here -->
</HEAD> - end of the head section

CC111: Website Design 17


<head>
<title>My first web page</title>
</head>

Title of the
Document

CC111: Website Design 18


CC111: Website Design 19
The BODY Section

<BODY>

{Text displayed by browser}

</BODY>

CC111: Website Design 20


Headings

• Headings act as titles to introduce new section of content


• Six headings are available (h1, h2, h3, h4, h5, h6)
• Browsers display headings in a boldfaced font and at different sizes,
h1 being the largest and h6 being the smallest

CC111: Website Design 21


Blockquote Element

• The blockquote element designates a long quotation,


such as passages from a book
• Browsers will display the blockquote element as a block
of indented text
• <blockquote> Quoted text here</blockquote>

CC111: Website Design 22


Commonly Used HTML Tags (continued…)

<P> … </P> : Paragraph.


<B> … </B> : Bold
<I> … </I> : Italic
<U> … </U> : Underline
<BR/> : Line break
<HR/> : Horizontal Rule (line)

CC111: Website Design 23


<body>
<p>It is easy to use HTML</p>
</body>

New
Paragraph

CC111: Website Design 24


The <p> Element

• Paragraphs are block-level elements that are only


allowed to contain text and inline elements
• Each paragraph begins on a new line and is followed by
a blank line of white space

<p>First paragraph</p> First paragraph


<p>Second
paragraph</p> Second paragraph

CC111: Website Design 25


br Element

• Go to next line

<p>This is an example <br


/>of using <br />the br
element</p>

CC111: Website Design 26


hr Element

• creates a horizontal line


• Used to separate between two sections of content

<h2>Customer feedback</h2>
<p> Our loyal customers love us</p>
<hr />
<h2>Reviews</h2>
<p>Even those stuffy restaurant critics can't resist our charms</p>

CC111: Website Design 27


Presentational Elements

• <i> Italic text


• <b> Bold text

CC111: Website Design 28


Unordered Lists

• Used to create lists wherein the sequence of the items isn’t


especially significant
• Each item in the list is surrounded with a <li> tags
• The while list is placed inside <ul> tags

<ul>
<li> First item in the unordered list
</li>
<li> Second item in the unordered list
</li>
</ul>

CC111: Website Design 29


Ordered List

• Defines an ordered list, one in which the items are meant


to be read or followed in a specific sequence

<ol>
<li> First item </li>
<li> Second item </li>
</ol>

CC111: Website Design 30


Nesting Lists

• Ordered and unordered lists can be nested inside each


other
• A list item can be a new list (ordered or unordered)
<ol>
<li>First item in main list
<ul>
<li>First item in nested list</li>
<li>Second item in nested list</li>
</ul>
</li>
<li>Second item in main list</li>
<li>Third item in main list</li>
<li>Fourth item in main list</li>
</ol>

CC111: Website Design 31


<font>

• Used to define the characters of the font

<font face="Aharoni" size=“3" color="fuchsia">Welcome to my


Site</font>

Font type
Font size Color

N=3 corresponds to default value

Value of n 1 2 3 4 5 6 7
Size in pt. 8 10 12 14 18 24 36

CC111: Website Design 32


Internal link

• Is a reference to a particular part of the same


page.
• Click upon the internal link will bring a visitor to
the particular part of the same page.
• To create an internal link:
– Create an anchor
– Add a hyperlink to the anchor

CC111: Website Design 33


Creating Anchors

• Place the cursor in the desirable part of a page,


where the link should bring visitors
• Create an anchor
<h2><a id="example"></a>Example headline</h2>
<a href="#example">Example headline</a>

CC111: Website Design 34


Link to a specific anchor

• Within a document

<A HREF=“#anchor name”> Label text </A>

• To a separate document

<A HREF=“URL#anchor name”>Label text </A>

CC111: Website Design 35


Link to E-mail address

<A HREF=“mailto:[email protected]”>
Say HELLO!!!</A>
Click on hypertext “Say HELLO!!!” will invoke an application
such as MS Outlook to send E-mail to the address
[email protected].

CC111: Website Design 36


Linking to E-Mail Addresses

<a
href="mailto:[email protected]?subject=Feedback"
>Feedback</a>

CC111: Website Design 37


Images

<IMG SRC=“image_URL”>
SRC – source of the image (file address)
Another attributes:
• BORDER=n, n-thickness of the border in pixels
• ALT – alternative text
• WIDTH – width of an image in pixels
• HEIGHT – height of an image in pixels
• ALIGN – position on a page
<IMG SRC=“images/pic1.bmp” WIDTH=30
HEIGHT=30 ALT=“Digimon”
ALIGN=“left” >

CC111: Website Design 38


Including Images in Your Content

<img src="/images/pizza.jpg" alt="A pizza with sausage" width="5" height="5" />

The source of Text value to be


the graphical displayed if the
file to be browser is unable Specify the
displayed to display an width and the
image height of the
image

CC111: Website Design 39


The alt Attribute

CC111: Website Design 40


How to make colors changes?

Colors are represented using Hexadecimal number (<Font


color= #19378a>) or using color name (<Font
color=white>)
 Changing the Background color
<BODY BGCOLOR=#19378a>
 Adding Background image
<BODY BACKGROUND=bgimg.gif >
Changing Text, background and links color from the body
<BODY BGCOLOR=#19378a TEXT=#000000 LINK=#ffff66
VLINK=#66ffff>
Changing font color
<FONT COLOR=#66ffcc>WENT'99</FONT>

CC111: Website Design 41

You might also like