MMI-402 - Lecture 1

MMI-402
Websites Management
and Development

Course outline
1. HTML 4.0 Coding
2. Principles of web design
3. Adobe Photoshop 7.0 for Web
4. Adobe Dreamweaver CS3 for Web Design
5. CSS 2.0 Coding
6. Simple Java Script
7. Site map
8. Publishing website online
9. Project

Week 1
<title>Html Part I</title>

A- HTML definition
• It’s a computer language that allow website creation. Which makes anyone else
connected to the Internet view this website. easy to learn, and powerful in what it
allows you to create.
The definition of HTML is Hyper Text Markup Language.
• Hyper Text is the method by which you move around on the web - hyper links -.
• Markup is what HTML tags do to the text inside them.
• HTML is a Language, as it has code-words and syntax like any other language.

• HTML consists of a series of short codes typed into a text-file these are the tags. The
text is then saved as an html file, and viewed through a browser. This browser reads
the file and translates the text into a visible form, hopefully rendering the page as the
author had intended.
B- How does HTML work?

C- What are the <tags> up to?
• The tags are what separate normal text from HTML code. You might know them as the
words between the <angle-brackets>. They allow images and tables and stuff, just by
telling your browser what to render on the page. Different tags will perform different
functions. The tags themselves don’t appear when you view your page through a
browser, but their effects do. The simplest tags do nothing more than apply formatting to
some text, as shown in Listing 1-1.
<b>These words will be bold</b>, and these will not.
Listing 1-1: The sample bold text tag

Figure 1-1: The sample bold text rendered by Internet Explorer
C- What are the <tags> up to?

• Not at all. You can code your entire website offline, storing it all on your own computer,
and then just transfer all the files onto the web. Then whenever you have new content,
you just add that to the existing online version of your site. It’s really quite simple.
D- Do I have to be online all the time?

• Of course, but since making websites became more popular and needs increased
many other supporting languages have been created to allow new stuff to happen.
E- Is there anything HTML can’t do?

A- Tag's structure:
• To indicate where a given element begins, place the appropriate tag before it. This
consists of a certain abbreviation sandwiched by the less-than (<) and greater-than (>)
symbols. For example, to mark up a paragraph, precede the text with the opening-
paragraph tag (<p>), To indicate where an element ends, place the corresponding
closing tag at the end. This looks the same as the opening tag, except for the addition of
the forward slash, as shown in Listing 2-1.
<p>This is a sample paragraph, to demonstrate how to write
a tag and give it a proper alignment with tag's attributes</p>
Listing 2-1: The sample paragraph tag

Figure 2-1: The sample paragraph rendered by Internet Explorer
A- Tag's structure:

B- Tag’s attributes
• When you define a tag’s attributes, which are its individual properties, enter them inside
the opening tag and separate them by spaces. The closing tag doesn’t get any
attributes. For instance, the attribute for aligning a paragraph is written, simply enough,
as align. Add it to the opening tag To set the attribute equal to an appropriate value,
define that value by using an equal sign and quotation marks, as shown in Listing 2-2.
<p align="right">This is a sample paragraph, to demonstrate how to
write a tag and give it a proper alignment with tag's attributes</p>
Listing 2-2: The sample paragraph tag attributes

Figure 2-2: The sample paragraph aligned right rendered by Internet Explorer
B- Tag’s attributes

A- Primary container :
• Let's open our text editor and begin a new blank document, then type the tag <html> at
the top of the document. This tag begins the document’s primary container. It defines the
type of document you’re creating: an HTML document. This opening <html> tag requires
a closing tag, so hit Enter twice to move down a few lines and then enter the closing tag,
</html>. our document should appear as shown in Listing 3-1.
<html>
</html>
Listing 3-1: The Primary container of our HTML document

B- The head section:
• Now place your cursor on the line between the opening and closing tags. Type the tag
<head>, which defines the head section of the document. Hit Enter twice and then type
</head>. Our document should now resemble and appear as shown in Listing 3-2.
<html>
<head>
<head>
</html>
Listing 3-2: The head section of our HTML document
<html>
<head>
</head>
</html>

C- Defining the document title:
•To create the document title, which appears in the title bar of the browser window, enter
<title> and </title> between the head tags of your document, as shown in Listing 3-3. For
example, entering <title>Lecture 1</title> produces what you see in Figure 3-1.
<html>
<head>
<title>Lecture 1</title>
</head>
</html>
Listing 3-3: Defining the document title tags
Figure 3-1: The document title displayed on the title bar of Internet Explorer

D- The last element:
• The last element to add to your document template is the body section. Between the
closing </head> and the closing </html> tags, enter opening <body> and closing
</body> body tags, as shown in Listing 3-4.
Listing 3-4: An HTML code with head and body sections defined
<html>
<head>
</head>
<body>
</body>
</html>

E- Saving:
• Save our document. Press File >> Save As. You can give it a name like blank.html and
then use it each time you want to start a new document by opening it, making changes,
and resaving the file with a different name.
Figure 3-2: Save As screen in Notepad

A- What is Meta Data?
• A document’s head section often contains descriptive information about the document,
referred to as metadata. Using the <meta> tag and its various attributes, you can define
such document properties as the author, the expiration date, document keywords,
and descriptions. When search engines that support metadata read your document,
they can use this information to index it in order to return your page when someone does
a search on subjects matching the keywords you have defined.

Figure 4-1: Google search page describe <meta> tags
Page title with meta keywordsPage title with meta keywordsMeta DescriptionMeta Description

B- Defining Meta Tag Keywords:
• In the head section of your document, below the document title, enter the <meta> tag,
Add the name attribute to the <meta> tag and set it equal to “keywords”, Insert a space
and add the content attribute:
Listing 4-1: An HTML code with the <meta> tag defined name attribute "keywords"
<html>
<head>
<meta name="keywords" content="HTML, Hypertext
Markup Language" />
</head>
<body>
</body>
</html>

C- Defining Meta Tag Descriptions:
• In the head section of your document, below the document title, insert another <meta>
tag. Add the name attribute to your <meta> tag and set it equal to “description”, Press
the Spacebar and add the content attribute, which accepts your description, Set the
content attribute equal to a short piece of descriptive text, as shown in Listing 4-2.
Listing 4-2: An HTML code with the <meta> tag defined name attribute "description"
<html>
<head>
<meta name="keywords" content="HTML, Hypertext Markup
Language" />
<meta name="description" content="HTML lectures. An
introductory guide for the beginning coder" />
</head>
<body>
</body>
</html>

D- Defining the Author of a Document Using Meta Tags:
• Enter a <meta> tag into the head section of your document, setting the name attribute
equal to "author", Follow the name attribute and author value with the content attribute,
Set the content attribute equal to the name of the author, as shown in Listing 4-3.
Listing 4-3: An HTML code with the <meta> tag defined name attribute "author"
<html>
<head>
<meta name="keywords" content="HTML, Hypertext Markup Language" />
<meta name="description" content="HTML lectures. An introductory guide
for the beginning coder" />
<meta name="author" content="Ahmed Abozeed" />
</head>
<body>
</body>
</html>

E- Defining Meta Tag Expiration Dates:
• Insert a <meta> tag in the head section, setting the name attribute equal to "expires",
Insert the content attribute, Set the content attribute equal to the expiration date, in
(GMT), as shown in Listing 4-4.
Listing 4-4: An HTML code with the <meta> tag defined name attribute "expires"
<html>
<head>
<meta name="description" content="HTML lectures. An introductory guide for
the beginning coder" />
<meta name="expires" content="Tue, 20 October 2009 02:00:00 GMT" />
</head>
<body>

E- Defining Meta Tag Expiration Dates:
• To prevent browsers from caching your documents at all, enter a <meta> tag with the
name attribute set equal to "pragma", and the content attribute set equal to no-cache,
as shown in Listing 4-5.
Listing 4-5: An HTML code with the <meta> tag defined name attribute "expires"
<html>
<head>
<meta name="expires" content="Tue, 20 October 2009 13:00:00 GMT" />
<meta name=”pragma” content=”no-cache” />
</head>
<body>

F- Refreshing Page Content Using Meta Tags:
• Enter a <meta> tag into the head section of your document, Add the
http-equiv attribute and set it equal to "refresh", Follow the http-equiv attribute and
refresh value with the content attribute and set it equal to the number of seconds you
want the page to remain static before refreshing, and to force the browser to load
another document after the refresh time elapses, follow the refresh rate value with a
semicolon and enter url=pathname, as shown in Listing 4-6. In this example, the page
will refresh after five seconds then load "abozeed.info".
Listing 4-6: An HTML code with the <meta> tag defined name attribute "http-equiv“
<html>
<head>
<meta http-equiv="refresh" content="5; url=http://www.abozeed.info" />
</head>
<body>

G- Defining Meta Tag Robot Values:
• Enter a <meta> tag in the head section of your document, below the document title,
define the name attribute and set it equal to "robots", to instruct robots to read your
entire page and follow all the links within it, and follow the name attribute and robots
value with the content attribute and set it equal to "all, follow", as shown in Listing 4-7.
Listing 4-7: An HTML code with the <meta> tag defined name attribute "robots" 1
<html>
<head>
<meta name="description" content="HTML lectures. An introductory guide
for the beginning coder" />
<meta http-equiv="refresh" content="5; url=http://www.abozeed.info" />
<meta name="robots" content="all, follow" />
</head>
<body>
</body>
</html>

G- Defining Meta Tag Robot Values:
• To instruct robots to read your page, but refrain from following the links within it, set the
content attribute equal to "all, nofollow", as shown in Listing 4-8.
<meta name="robots" content="all, nofollow" />
• And to prevent robots from reading your page at all, set the content attribute equal to
"none", as shown in Listing 4-9.
<meta name="robots" content="none" />

5- Controlling the Document Background

A- What is Document Background?
• We can specify a document’s background color or background image using two
different attributes of the <body> tag. Background colors simply fill the entire document.
Background images are tiled by the browser, meaning they are repeated left to right, top
to bottom, filling up the visible space of the browser window.

B- Color Background:
• To define a background color for a document, add the bgcolor attribute to the <body>
tag, Set the bgcolor attribute equal to a hexadecimal color value or predefined color
name. Listing 5-1 shows a document with a black background color defined in
hexadecimal notation, Figure5-1 displays the result in a browser.
Listing 5-1: An HTML code with the <body> tag defined name attribute "bgcolor"
<html>
<head>
<title>Background Color</title>
</head>
<body bgcolor="#000000" text="white">
<h1>Here we have a black background with white text...</h1>
</body>
</html>

Figure 5-1: The sample color background rendered by Internet Explorer
B- Color Background:

C- Images Background:
• To specify a background image, add the background attribute to the <body> tag, Set
the background attribute equal to the pathname of the image file on your Web server.
Listing 5-2 provides a code sample of a document that makes use of a tiling background
texture graphic. Figure 5-2 displays the result in a browser.
Listing 5-2: An HTML code with the <body> tag defined name attribute "background"
<html>
<head>
<title>Background Images</title>
</head>
<body background="images/bg_stone.jpg">
<h1>Isn’t this a nice stone background?</h1>
</body>
</html>

Figure 5-2: The sample image background rendered by Internet Explorer
C- Images Background:

Next Week
• Working with text
• Working with image
• Audio and Video
• Hyper Links

For Assignments and Quizzes
http://iams.abozeed.info

MMI-402 - Lecture 1

More Related Content

What's hot (19)

Viewers also liked (9)

Similar to MMI-402 - Lecture 1 (20)

Recently uploaded (20)

MMI-402 - Lecture 1