Basic Website Structure: Subject Code: Gec-It 2

Subject Code:
GEC-IT 2
History of HTML Timothy Berners Lee originally developed HTML while he was at the CERN(1980). He proposed and prototype ENQUIRE, a system for CERN RESEARCHERS to use and share documents Mosaic browser develop at NCSA popularized HTML. 1990, HTML had blossomed with the explosive growth of WWW.
What is HTML? HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
Types of Web Pages

There are basically six types of web pages. News sites - News sites contain stories and articles related to current events, life, money, sports, and weather. Business and marketing sites - Business and marketing sites contain information that promotes or sells products or services. Advocacy sites - Advocacy sites promote causes, opinions, and ideas in order to attempt to convince the reader of the validity of this point of view. Personal sites - Personal sites are posted by private individuals for their own purposes. Web portal - Web portals provide a variety of Internet services such as search engines, news, reference tools, personal web pages, newsgroups, calendars, and chat rooms. Educational sites - Educational sites are provided for various educational purposes.
Basic Website Structure

As the diagram below shows a website is composed of three main areas:
The structure of a website is like the skeleton or nervous system in the human body. Every joint or synapse is connected together into a network of mechanical or electrical links, which in turn makes us who and what we are. So should a website be connected through a network of links into something that provides form and function to your site. The website basic layout shown below is a simplified example of such a network.
Prepared By: Ms. Jenny Anne B. Cabiling
HTML Tags HTML markup tags are usually called HTML tags Tagname is the type of text being defined by the tag.

HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags
Attributes gives extra or added info on how the element should behave. Not all HTML tags have attributes.
HTML BASIC STRUCTURE <HTML> <Head> Header Elements </Head> <Body> Body Elements </Body> </HTML>
<html></html> -- defines the page as an html document <head></head> -- area at the beginning that provides information to the browser, but does not show on the page <title></title> -- element within heading that shows the title of the page. This is the title that shows on the top of the browser and for bookmark purposes, but does not appear on the page itself. <body></body> -- defines the actual body of the page
YOU WILL ALSO NEED A TEXT EDITOR PROGRAM -capable of creating plain text files e.g. SimpleText for theMacintosh or NotePad for Windows.
Comment Tags enclosed by . The text between the tags is NOT displayed in the web page but is for information that might be of use to you or anyone else who might look at the HTML code behind the web page.
Text Indent By default the first line of paragraphs in html have an indent. Code: Output:
This paragraph does not This paragraph does not have an indent. have an indent.
2
The BODY Element Tags and Attributes

The <body> tag is used to start the BODY element and the </body> tag ends it. It is used to divide a web page within one or more sections. Its tags and attributes are:
BACKGROUND="clouds.gif" - (Depreciated) Defines the name of a file to use for the background for the page. The background can be specified as in the following line. BGCOLOR="white" - Designates the page background color. TEXT="black" - Designates the color of the page's text. LINK="blue" - Designates the color of links that have not been visited. ALINK="red" - Designates the color of the link currently being visited. VliNK="green" - Designates the color of visited links.
HTML Headings <hN>Text to appear in Heading </hN> *N is a number from 1 to 6 identifying the Heading Size Level 1- most important: Level 6 least important Paragraph Tags Attrib: Align = right:left:center Style Blockquote Tags to indent a section of text from both side <blockquote> </blockquote> Preformatted Tags- instruct your web browser to display the text exactly as typed in the text editor. <pre></pre> Other Type of Breaks Horizontal Rule This places a line across your document <hr></hr> attrib = no shade width size align Line break a tag which forces text to a new line 
Formatting Text The tags listed in the table below can be used to change the format of text, e.g. bold text, italic text etc. Tag <big> <del> <ins> Function bold text big text deleted text Output This is bold. I am big deleted text
emphasized text This is emphasized text italic text inserted text This is italic inserted text I am small I am strong! Textsubscript Textsuperscript
 small text strong text subscript superscript
underlined text This is underlined text
Remember to include the closing tags at the end of the formatted text. Font Element: The element can be used to style text, for example setting font color, size etc. Wrap the text to be styled between the opening and closing font tags. Then use the attributes in the table below to style the text. Attribute Function Sample Code Output red text
<color> set the color red text <face> <size> font type text size
geneva geneva size 3 size 3
Note: The font element is deprecated in html 4.01, it is reccomended to use style sheets instead to perform the above functions. It is included here for completeness. Entities What are Entities? Some characters in html have special meanings and cannot be included as part of a documents text. Common examples include '<' and '>' which are used to open and close html tags. Instead html provides entities that are used in place of these characters. Entities are also provided for characters that are not common to keyboards such as and .
Entities are made up of the following format: 1. & 2. entity name 3. semicolon ; Example: Code: The price is €50. Output: The price is 50.
® A registered trademark. A registered trademark.
Common Entities Below is a table of some of the most frequently used html entities. Entity < > " & Meaning Less than Greater than Copyright Registered Trademark euro Code < > © ® €
double quotation mark " ampersand multiplication plus minus divide & × ± ÷
Non-Breaking Space adding a space character
Here are some examples of how you might use the non-breaking space: HTML Result Two non-breaking spaces are used to spread the letters in a word farther apart <tt> C H E E S E </tt> C H E E S E
HTML Lists
An Overview There are three main types of lists included in html which are shown in the table below: 1. Unordered List 2. Ordered List Definition List html

United States Australia China United Kingdom Japan
1. 2. 3. 4. 5.
Spiderman 3 Pirates of the Carribean Die Hard 4 The Simpsons Movie Fantastic Four
hypertext markup language css cascadsing style sheets URL uniform resource locator
Unordered Lists Unordered lists are your bullet style lists. Declare an unordered list using the <ul> tag. <ul> ...Place list items here... </ul> To insert a list item then use the <li> tags within the <ul> element. Code: <ul> <li> This is a list item.</li> </ul>
Output
This is a list item
You can make the list as long as you like by simply adding in more list items using <li>. If you do not like the disc () style points then you can change these using the 'type' attribute. Place the 'type' attribute in the opening <ul> tag. See the table below for styles: Style Circle Value <ul type="circle">
Square <ul type="square"> disc <ul type="disc">
Ordered Lists Ordered lists instead of being composed of bullets are composed of numbers or letters. Declare an unordered list using the <ol> tag. <ol> ...Place list items here... </ol> To insert a list item then use the <li> tags within the <ol> element. Code: <ol> <li> This is a list item.</li> </ol>
Output 1. This is a list item You can make the list as long as you like by simply adding in more list items using <li>. If you do not like your list to be ordered with numbers then you can change it to be ordered with letters or roman numerals. To do this use the 'type' attribute in the opening <ol> tag, see the table below. Style 1., 2., 3.,...(Numbers) a., b., c., ... (letters) Value <ol type="1"> <ol type="a"> Two attributes for <ol> 1. Type 2. Start
A., B., C., ... (capital letters) <ol type="A">
Definition Lists A definition list simply consists of a term followed by its definition. Where the definition is normally indented. A definition list can be created using the <dl> element. Code: <dl> ...Enter list items here... </dl> Each list item includes two parts, a term and a definition. The <dt> tag is used to insert the term, where as the <dd> tag is used to create the definition. Code: <dl> <dt> Jupiter </dt> <dd> The biggest planet in the solar system </dd> </dl>
Output: Jupiter The biggest planet in the solar system Add as many terms as you like to a definition list using the <dt> and <dd> tags.
*note= lists of list is also known as NESTED LIST or the combination of lists

Basic Website Structure: Subject Code: Gec-It 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Basic Website Structure: Subject Code: Gec-It 2

Uploaded by

Copyright:

Available Formats

Subject Code:

What is HTML? HTML is a language for describing web pages.

Types of Web Pages