Embed Size (px)
Citation preview
Web Page Design
HTML (HyperText Markup Language)HTML (HyperText Markup Language)
Web Page Design• Practical experience of creating simple web
pages containing hyperlinks
– page structure: html, head, title, body
– block-level tags: div, p, hr, h#, ol, ul, li
– in-line tags: span, strong, em, br, img, and
– other tags: link, meta, comments
A web page• A Web Page is a document containing text; graphics
(images) and other embedded media, e.g. sound; and links (pointers) to other web pages .
• The links are called hyperlinks and a special markup language called HTML (HyperText Markup Language) was created so that these links could be written as strings of text. (http://en.wikipedia.org/wiki/HTML)
• A web page that points to other web pages is said to use hypertext.
• One of the pages of a web site is denoted the home page. Hypertext navigation is a major component of web page design.
• The source for this web page was created in a text editor, Microsoft's WordPad, and saved with the extension .html.
• Text in a web page can be two kinds of information:
content for display and formatting.
• A web browser needs formatting information so that it can present the content as intended. Content is placed between start and end tags:
<something> information content </something>
• The start tag, the content and the end tag form an element. Tags mainly mark areas of the web page that are to be formatted. This is why HTML is called a markup language .
Web Page Construction
• Here is the skeletal structure for any web page:
<html>
<head> <title>Title of the Web Page goes here </title></head>
<body> Content of the Web Page goes here </body>
</html >
• Here is the skeletal structure for any web page:
<html>
<head> <title>Title of the Web Page goes here </title></head>
<body> Content of the Web Page goes here </body>
</html >
• All tags should be written in lower case to conform to the latest standard defined by the World Wide Web Consortium (W3C).
• Extensible Hypertext Markup Language (XHTML) is the latest version of HTML.
• XHTML is a combination of HTML and Extensible Markup Language (XML).
• The web page should be saved with file extension .html.
The html Tag
• The markup part of every web page must begin with <html> and end with </html> .
• These two tags tell the browser that the document is written in HTML and that it should translate every tag it finds between them into the proper effect.
The Head and Title Tags
• The head comes first, is surrounded by the <head> and </head> tags and usually contains information about the web page enclosed in the <meta *** /> tag that is not displayed as normal text but may be used by search engines and other programs to categorise or list the page.
• Here is an example:
The <meta /> Tag
<head>
<title>HTML Example</title>
<meta name="generator" content="TextPad 4.6" />
<meta name="author" content="Fred Bloggs" />
<meta name="keywords" content="example, html" />
<meta name="description" content="Example of simple HTML" />
</head>
<head>
<title>HTML Example</title>
<meta name="generator" content="TextPad 4.6" />
<meta name="author" content="Fred Bloggs" />
<meta name="keywords" content="example, html" />
<meta name="description" content="Example of simple HTML" />
</head>
In this example, name and content are attributes (Attribute: a named field that appears inside an HTML tag) of the HTML tag <metal>.
The title is used by search engines, browser history lists, favourites lists and bookmark facilities.
Useful links: http://searchenginewatch.com/2167931 http://www.w3schools.com/tags/tag_meta.asp
The body tag
• Everything that you place in the body of your web page will be displayed in the main window of a browser.
• This section is structured with the tags
<body> and </body>
• The <html> ... </html> acts like a container for the document.
• The <head> ... </head> contains the title, and information on style sheets and scripts,
• While the <body> ... </body> contains the markup with the visible content.
Regular Text and Paragraphs
• Most web pages contain just plain text, typed as text into the body section of the web page. However, there are some key differences between plain text and body text.
• Firstly, line breaks have to be explicitly marked with the <br /> tag. Text can also be separated with the <p> tag, or paragraph tag.
• The <p> tag is paired with the </p> tag. When the combination <p> </p> is used, not only is a new line started but also an empty line is put before the paragraph text and after it.
Headings
• Often a web page needs to include headings in larger, bolder text that stands out.
• To create headings, use:
<h#>Heading text</h#> and replace # with a number from 1 to 6. The text inside will be bold and usually larger – h1 gives the largest headings - and surrounded by empty lines.
heading.</h6> h6 an is <h6>This
heading.</h5> h5 an is <h5>This
heading.</h4> h4 an is <h4>This
heading.</h3> h3 an is <h3>This
heading.</h2> h2 an is <h2>This
heading.</hl> h1 an is <h1>This
The Figure below shows how the following lines of HTML code appear in a browser:
Typography • As a rule of thumb, paragraph text should use a
sans serif font such as Arial and headlines should use a serif font such as Times New Roman - the opposite of what is used for printed text.
• Explore font settings at www.typetester.maratz.com. Anything from 45 to 75 characters is widely regarded as a satisfactory line length, and 66 characters - letters and spaces - is widely considered ideal.
CoLour in Web Pages
• Colour may be expressed as a six-digit hexadecimal number, two digits per primary colour.
• For example, #FFFFFF corresponds to white, #0000FF to blue, #00FF00 to green and #FFOOOO to red, the additive primary colours.
Images
• To include an image on a web page use <img src="image1.gif" alt="first image" width="70" height="70“/>
• The attribute alt allows a text description of the image to be used in place of the image in text-only browsers.
• The width and height attributes set the image's display size in pixels.
Links
• Links, or hyperlinks, are the hooks that make it possible to navigate to information without knowing the precise details of its location or identity.
• For example, you may not know the name of a file on www. educational-computing.co.uk that contains an article you want to read, but you can still get to it by clicking on the appropriate link.
Text links to other pages
• To create a link in a web page, use tags <a> </a> and the attribute href:
<a href=''http://domain name/path name">Caption for link</a>
• To make a link to www.educational-computing.co.uk, the HTML :
<a href=''http://www.educational-computing.co.uk''>Click here for ECS!</a>
Will display in a web browser as Click here for ECS!
Text links in a page
• Anchors use the same <a></ a> tag pair as regular links.
• To create an anchor, simply write <a name="anchorname"></a> immediately in front of the place you want your link to point to. For example, the top of a page could have an anchor called top:
<a name="top"></a>
To link to a named anchor, use href plus # and the anchor name. This HTML
<a href="#top">Click here for the top of this page</a>
produces
Click here for the top of this page
If you click on the link, it will take you to the anchor named top.
• Unordered Lists are the same as ordered lists but the browser does not automatically number the list items.
• Each item starts with a symbol, or dingbat, such as filled square or filled circle.
• An unordered list is created in the same way as an ordered list, but the list is enclosed by
<u1> and </u1 > instead of <01> and </01 >.
Unordered Lists
Test your HTML skills Online
http://www.w3schools.com/html/
Key TermsKey Terms
