Internet Technology and Website Design Course Code: 2111 Instructor: Atuheire Izaara Ambrose Credit: 4.0 When: 10:00am – 1:00, Tuesday / Wednesday 11:00 – 12:30 pm Venue: S310 and ICS LAB II
Lecture Two Creating a Basic Web Page Basic Web Design Lecture Two Creating a Basic Web Page
Review Internet ARPANET – 1957 Intranet Extranet World Wide Web W3C TCP/IP IRC Hypertext Website
Terms to be familiar with Browser Download Upload E-Mail Filter Home page HTML HTTP Hypertext Search Engine TCP/IP URL
Domains Domains divide World Wide Web sites into categories based on the nature of their owner, and they form part of a site's address, or uniform resource locator (URL). Common toplevel domains are:
HTML Source Document When you connect to a web page by entering its URL into the browser Browser instructs your computer to send a message out over the Internet to the computer specified by that URL requests that it sends back a certain document (HTML source doc) HTML source doc describes the content and layout of the web page After your computer receives the html, your browser interprets the html and displays the resulting web page (text/graphics/links etc)
What does HTML stand for Hypertext Refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. Markup Language Describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.
HTML Source Document HTML source document A text-only document Consists of (1) actual text, and (2) tags A tag is an html code that is enclosed in angel brackets <>; used to lay out the web page. XHTML is a simple, more standardized version of HTML XHTML/HTML can be created using a simple text editor like notepad File extension must be .html or .htm
Sample HTML HTML Source Firefox display of the html source
HTML, XML, XHTML, HTML5 XML (eXtensible Markup Language): is a set of rules that lets web designers classify their data in a way customized to their needs. Extendable by creating new types of tags. XHTML (eXtensible HyperText Markup Language): A new version of HTML based on XML Inherits strict syntax rules of XML
Some comparisons of HTML vs. XHTML HTML XHTML Tags aren’t extensible Tags are extensible Tags are not case-sensitive Only lowercase tags are allowed Possible to leave off and ending tag like </body> Tags should appear in pairs Overlapping tags No overlapping tags For this course, we use XHTML and HTML5
HTML Editors Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). I believe using a simple text editor is a good way to learn HTML.
Composition of a XHTML Document An XHTML / HTML5 document consists of three main parts: the DOCTYPE the Head the Body
Composition of a XHTML Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> ... <title>…</title> </head> <body> … </body> </html>
Composition of HTML 5 document <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title of the document</title> </head> <body> Content of the document...... </body> </html>
Explanation of Document Structure Tags <HTML>…</HTML> Enclose the document. Show browser start and end of content reading. <HEAD>…</HEAD> Contains elements that describe the document and its relationship to other documents <TITLE>...</TITLE> Contained in the head and displayed at the top of the browser window or on a bookmark list. <BODY>...</BODY> Contains all the information which is part of the document
Attributes for the body tag <body background=“something.gif”> </body> <body bgcolor=“oooooo”> <body link=“#oc6249”>…or vlink=“#0775933” <body text=“#oooo6a”> hexadecimal color for default text color. Thus "000000" is black and "FFFFFF" is white and every other colour in between is described using these 6 characters in different combination. Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive, Purple, Silver, Teal, White, and Yellow.
Creating XHTML The code inside red rectangle (<!DOCTYPE … dtd”>) is a Document Type Definition (DTD), it specifies what type of document this is – in this case an XHTML document. The code inside green rectangle, xmlns specifies the namespace, it tells the browser that all tags contained within the <html> tag belong to the XHTML namespace as defined by the W3C and located at the given URL.
XHTML Tags/Elements Tags are also called elements An attribute is a special code that can enhance or modify a tag. They are generally located in the starting tag after the tag name. Basic syntax for xhtml tags and attributes <tag attribute="value"> </tag> All tags must be lower case all values of attributes need to surrounded by quotes
XHTML Tags/Elements Example <strong>This is bold text…</strong> <p style =“text-align:center">This text will appear aligned to the center…</p>
<meta> tag <meta> tag is used to specify keywords that describe a document’s contents as well as a short description. Two necessary attributes – "name" & "content" <meta name="keywords" content="baseball, soccer, tennis"/> <meta name="description" content="Sports information page"/> <head> <meta charset="UTF-8"> <meta name="description" content=“My first Webpage"> <meta name="keywords“ content=“Name, Address, Age, Profile"> <meta name="author" content=“Ambrose Izaara"> </head>
<p> paragraph tag <p> tag The paragraph tag. Used to separate text within a web page. Container type Will provide line breaks Optional attribute : align (not allowed in XHTML 1.0 Strict though) <p align="center">
<br/> tag <br/> tag Is used for line break Example <p> Contact<br /> Plot 54 MUST campus<br /> University of Mbarara<br /> Mbarara, P.O. Box 1410 </p>
Headings <h1> to <h6> Define headers. <h1> defines the largest header. <h6> defines the smallest header. Example <h1>This is header 1</h1> <h2>This is header 2</h2> <h3>This is header 3</h3> <h4>This is header 4</h4> <h5>This is header 5</h5> <h6>This is header 6</h6>
<em> & <strong> tags <em> tag Renders text as emphasized text <strong> tag Renders text as strong emphasized text Example <em>Emphasized text</em><br /> <strong>Strong text</strong><br />
Commenting Source Code Comments are enclosed in <!-- and --> Example <!--This comment will not be displayed--> <p>This is a regular paragraph</p>
<blockquote> tag tag defines the start of a long quotation. To validate the page as strict XHTML, you must add a block-level element around the text within the <blockquote> tag, like this: <blockquote> <p>here is a long quotation here is a long quotation</p> </blockquote>
HTML Images HTML images are defined with the <img> tag. The source file (src), alternative text (alt), and size (width and height) are provided as attributes: Example <img src=“image.jpg" alt="W3Schools.com" width="104" height="142">
HTML Elements An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...</tagname> The HTML element is everything from the start tag to the end tag: <p>My first paragraph.</p> Some elements have no content such as the <br> tag
Nested HTML Elements Example <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
Do Not Forget the End Tag Some HTML elements will display correctly, even if you forget the end tag: Example <html> <body> <p>This is a paragraph <p>This is a paragraph </body> </html> Never rely on this; you may get unexpected errors
Empty HTML Elements HTML elements with no content are called empty elements. <br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br />. HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.