Download presentation
Presentation is loading. Please wait.
1
Web Programming– UFCFB3-30-1 Lecture 6
Instructor : Mazhar H Malik Global College of Engineering and Technology
2
Building the web Page LO 2, 5
Lecture Six Building the web Page LO 2, 5 9/5/2018 Lecture 6
3
In this lecture… File naming conventions The DOCTYPE declaration
Meta tags File structure (head-body) and HTML code CSS and the CSS box model 9/5/2018 Lecture 6
4
File naming conventions
Don’t use spaces Other systems might not recognise them Use underscore e.g. product_list.html Use proper suffixes: .htm is ok for Windows servers; .html is universal .jpg, .gif, .png etc File names are case-sensitive: get into the habit of using lowercase Keep file names short The home page should always be index.html or default.html 9/5/2018 Lecture 6
5
DOCTYPE declaration This is at the top of the code for the page
It tells the browser what version of HTML is being used - so that your page displays as you intend it to There are three versions: Strict - follows all the rules exactly Transitional - allows some variation Frameset - if the page has frames 9/5/2018 Lecture 6
6
Example DOCTYPE Strict Transitional Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ' The declaration points to two sources of DOCTYPE information - one a document, the other a URL Often the URL part is omitted 9/5/2018 Lecture 6
7
Meta tags Meta means “about” Meta tags are tags about the page overall
e.g. a meta-story is a story about stories Meta tags are tags about the page overall Meta tags are useful to search engines, servers, and browsers They are invisible to the user They are always in the head section of the page code 9/5/2018 Lecture 6
8
Example meta tags <meta name="description" content="Luxury cars for adventurous people."> This shows on the results page of a search engine, and in bookmarks <meta name="keywords" content="BMW, Audi, Ferrari, Mercedes, Benz, Mercedes Benz, Aston, Aston Martin"> These key words are used by a search engine to index your page <meta name="author" content="James Bond"> 9/5/2018 Lecture 6
9
Meta tags in use - search for ‘luxury car’
Key words helped this site come top of the 15 million results The Description 9/5/2018 Lecture 6
10
Fitting it all together - File structure
Web pages are written in plain text You can use Windows Notepad to make a web site There is no formatting - the tags do that when the page is displayed in a browser In this paper you use a WYSIWYG web authoring tool (e.g. Dreamweaver or Nvu) 9/5/2018 Lecture 6
11
Standard structure of an HTML document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title> Document Title</title> </head> <body> Contents of the document… </body> </html> The DOCTYPE declaration The start and the end of the HTML The head section The body section 9/5/2018 Lecture 6
12
HTML document sections
DOCTYPE always comes first Tells the browser what version of HTML is being used <html> always comes next; </html> is always last Tells the browser where the HTML document starts and finishes 9/5/2018 Lecture 6
13
The <head> section
This is a container for tags that help define and manage the document's contents Head tags include: The <title> tag contains the document title that appears in top bar of the browser, is used by search engines, and is the default text for bookmarks <meta> tags as discussed above <script> tags allow JavaScript to be added Items in the <head> don't show in the main window 9/5/2018 Lecture 6
14
The <body> section
Contains the document content - what shows in the browser window Could be text, graphic, table, multimedia 9/5/2018 Lecture 6
15
Example… Title (from head section) The body section 9/5/2018 Lecture 6
16
Cascading Style Sheets
HTML was designed for page structure; not for formatting CSS are the W3C standard for controlling all presentation Cascading means that style information is passed down from higher-level style sheets until it is overridden by a style command with more weight 9/5/2018 Lecture 6
17
Styles You declare once how a page element will be formatted and all elements will take on that format - for example: Your document has two levels of headings - a main heading (H1) and a subheading (H2) You set the style for each (font, size, colour etc) All H1 and H2 text will now follow that style If you want to change the look of the headings, change once in the style sheet; all headings will update 9/5/2018 Lecture 6
18
Three places for style sheets
External - the style is to be applied to many pages A separate sheet that all pages in the web site link to Each page refers to the style sheet to find out how to display itself To change the look of the whole site you only need to change one file Internal - a single document has a unique style At the top of the web page itself, in the head section Inline Mixed in with the content of a page. Try to avoid. 9/5/2018 Lecture 6
19
Some general properties
Font - letter form, size, boldface, italic Text - alignment, leading, case Lists - bullets, numbering, indentation Colour - borders, text, bullets, rules, background Background - of the whole page or a page element Border & margin - margin, borders, padding, width, height Positioning - exact placement within the window Visibility - if an element shows (and how much of it) 9/5/2018 Lecture 6
20
CSS example This example uses an internal style sheet (it is in the <head> section) Your page is to look like this: A main heading (h1) Subheadings (h2) And text under each h2 Heading 1 Heading 2 Text Heading 2 Text Heading 2 Text 9/5/2018 Lecture 6
21
Set up the base document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>CSS Example</title> </head> <body> </body> </html> This example shows the coding… Note that the web authoring tool you use in labs will take care of that for you! 9/5/2018 Lecture 6
22
Add the rules… <html> </html> <head>
<title>CSS Example</title> <style type="text/css"> <!-- h1 {color: red; font-size: 24pt;} h2 {color: blue; font-size: 18pt;} --> </style> </head> <body> </body> </html> 9/5/2018 Lecture 6
23
Add the content…(only showing body)
This is Heading One <p> This is a paragraph of text </p> This is Heading Two This is Heading Three </body> 9/5/2018 Lecture 6
24
The next slide shows what it looks like in the browser
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>CSS Example</title> <style type="text/css"> <!-- h1 {color: red; font-size: 24pt;} h2 {color: blue; font-size: 18pt;} --> </style> </head> <body> This is Heading One <p> This is a paragraph of text </p> This is Heading Two This is Heading Three </body> </html> The HTML (so far) The next slide shows what it looks like in the browser 9/5/2018 Lecture 6
25
There is no formatting yet - the next slide shows adding the h1 or h2 tags to the text
9/5/2018 Lecture 6
26
Add the h tags…(only showing body)
<h1>This is Heading One</h1> <p> This is a paragraph of text </p> <h2>This is Heading Two</h2> <h2>This is Heading Three</h2> </body> 9/5/2018 Lecture 6
27
Now the page displays like this
If I want to change all the h2's to green, all I need to do is change the style, not each individual heading (imagine this is a large page with, say,fifteen heading 2's) <head> <title>CSS Example</title> <style type="text/css"> <!-- h1 {color: red; font-size: 24pt;} h2 {color: green; font-size: 18pt;} --> </style> </head> 9/5/2018 Lecture 6
Similar presentations
