Lecture1

MMI-402 Websites Management and Development

Course outline ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

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

A- HTML definition ,[object Object],The definition of HTML is Hyper Text Markup Language. ,[object Object],[object Object],[object Object]

[object Object],B- How does HTML work?

C- What are the <tags> up to? ,[object Object],<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?

[object Object],D- Do I have to be online all the time?

[object Object],E- Is there anything HTML can’t do?

A- Tag's structure: ,[object Object],<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 ,[object Object],<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 : ,[object Object],<html> </html> Listing 3-1: The Primary container of our HTML document

B- The head section: ,[object Object],<html> <head> <head> </html> Listing 3-2: The head section of our HTML document <html> <head> </head> </html>

C- Defining the document title: ,[object Object],<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: ,[object Object],Listing 3-4: An HTML code with head and body sections defined <html> <head> <title>Lecture 1</title> </head> <body> </body> </html>

E- Saving : ,[object Object],Figure 3-2: Save As screen in Notepad

A- What is Meta Data? ,[object Object]

Figure 4-1: Google search page describe <meta> tags Page title with meta keywords Meta Description

B- Defining Meta Tag Keywords: ,[object Object],Listing 4-1: An HTML code with the <meta> tag defined name attribute "keywords" <html> <head> <title>Lecture 1</title> <meta name="keywords" content="HTML, Hypertext Markup Language" /> </head> <body> </body> </html>

C- Defining Meta Tag Descriptions : ,[object Object],Listing 4-2: An HTML code with the <meta> tag defined name attribute "description" <html> <head> <title>Lecture 1</title> <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 : ,[object Object],Listing 4-3: An HTML code with the <meta> tag defined name attribute "author" <html> <head> <title>Lecture 1</title> <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 : ,[object Object],Listing 4-4: An HTML code with the <meta> tag defined name attribute "expires" <html> <head> <title>Lecture 1</title> <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" /> <meta name="expires" content="Tue, 20 October 2009 02:00:00 GMT" /> </head> <body>

E- Defining Meta Tag Expiration Dates : ,[object Object],Listing 4-5: An HTML code with the <meta> tag defined name attribute "expires" <html> <head> <title>Lecture 1</title> <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" /> <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 : ,[object Object],Listing 4-6: An HTML code with the <meta> tag defined name attribute "http-equiv“ <html> <head> <title>Lecture 1</title> <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" /> <meta http-equiv="refresh" content="5; url=http://www.abozeed.info" /> </head> <body>

G- Defining Meta Tag Robot Values: ,[object Object],Listing 4-7: An HTML code with the <meta> tag defined name attribute "robots" 1 <html> <head> <title>Lecture 1</title> <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" /> <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: ,[object Object],Listing 4-8: An HTML code with the <meta> tag defined name attribute "robots" 2 <meta name="robots" content="all, nofollow" /> ,[object Object],Listing 4-9: An HTML code with the <meta> tag defined name attribute "robots" 3 <meta name="robots" content="none" />

5- Controlling the Document Background

A- What is Document Background? ,[object Object]

B- Color Background: ,[object Object],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: ,[object Object],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 ,[object Object],[object Object],[object Object],[object Object]

For Assignments and Quizzes ,[object Object]

Lecture1

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (9)

Similar to Lecture1

Similar to Lecture1 (20)

Recently uploaded

Recently uploaded (20)

Lecture1