Scribd
Upload
161 views

Unit 21 - Website Authoring

This document provides an overview of website authoring, including the development layers used to create web pages, HTML tags for text formatting and page structure, and CSS for styles and presentation. It describes the head and body sections of HTML, using tables to structure elements, embedding and linking CSS, and tags for images, videos, audio, and hyperlinks. Styles are explained for properties like color, font, and layout. The roles of IDs, classes, and external stylesheets are also covered.

Uploaded by

CLARA D SOUZA THOMAS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
161 views

Unit 21 - Website Authoring

This document provides an overview of website authoring, including the development layers used to create web pages, HTML tags for text formatting and page structure, and CSS for styles and presentation. It describes the head and body sections of HTML, using tables to structure elements, embedding and linking CSS, and tags for images, videos, audio, and hyperlinks. Styles are explained for properties like color, font, and layout. The roles of IDs, classes, and external stylesheets are also covered.

Uploaded by

CLARA D SOUZA THOMAS
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Website Authoring

In this chapter you will learn about :


★ Development layers used in web page creation ★ Head and body sections
★ Tags to text in the content layer to display pre-defined styles
★ Place appropriate content in the body section
★ The reason for using tables to structure elements within a web page
★ Use embedded CSS in HTML ★ set table and cell sizes in terms of pixels
★ set table and cell sizes in terms of % values ★ apply styles to tables
★ adjust cells to span more than one table column ★ adjust cells to span more than one table row
★ insert an image ★ adjust an image size ★ insert a video file ★ insert an audio file
★ apply styles to elements within a web page ★ apply styles to a list ★ create a bookmark
★ create a hyperlink ★ understand the need to use relative file paths ★ use the head section
★ insert a page title ★ understand the function of metatags ★ use metatags
★ set a default target window ★ apply styles and classes to the HTML
★ understand the characteristics of cascading style sheets ★ understand CSS syntax
★ save styles in cascading style sheet format ★ attach an external stylesheet to a web page
★ understand the use of relative file paths for attached stylesheets ★ add comments to a stylesheet
★ specify CSS text ★ specify font properties ★ specify background properties
★ specify table properties ★ styles and classes b ★ create and apply a class ★ specify CSS tables.

1
What is a website?
Website Authoring
A website is a collection of individual but related web pages that are often stored together and hosted by a web
server. Web pages can include different objects such as text, sound, video and still images.

Web development layers:


• the content/structure layer This layer is where the content of the web page, such as text and images, are
placed, where the page structure such as frames, tables, hyperlinks, etc. are placed. This layer is also called the
structure layer. You will develop the content/structure layer of your web pages in a language called HTML.
• the presentation/style layer contains the styles to be used, such as colour themes, fonts, etc. You will
develop the presentation layer of your web pages using CSS.
Styles are created and added to web pages. CSS can be embedded into HTML but it is usually created in a
separate file saved with a .css file extension. The stylesheet is then attached to a web page.
• the behaviour layer This layer is where all actions, such as controlling elements (hovering over the hyperlinks,
clicking hyperlinks, scripting language like JavaScript) are used.

What is HTML?
HTML is an abbreviation for HyperText Markup Language. It is a text-based language used to develop the content
layer of websites. Files are written in HTML using a simple text editor with an .htm (or .html) file extension.
Head and body two sections of the webpage.
The head section 
• Starts with <head> and closes with </head>. Objects between these tags are not displayed by the web browser.
The Only a tags that are accepted within the head section of a web page are <base>, <link>, <meta>, <title>,
<style> and <script>.
• The head section should always contain a title. This is the name displayed in the browser toolbar.
The body section
Starts with <body> and closes with </body> and objects between these tags are displayed in the web page.
Relative file path When creating a hyperlink reference to another file, particularly one stored locally, it is really
important to use a relative file path.
Absolute file path  It is a full path which points to the same location in a file system regardless of the current
working directory. Absolute paths use URLs that refer to a very specific location on the Internet. These paths will
include a domain name as part of the link path itself. (email hyperlinks for example) 2
Website Authoring
Add comments to your HTML markup <!-- and end with -->
HTML tags:
• Apply tags <p> and ended with </p>
• Six heading styles are available and are defined with the style names <h1> to <h6>
• Bulleted(<ul>) or numbered(<ol>) list can be defined with the <li> tag and finished with </li>
• Superscript <sup> and </sup>
• Subscript <sub> and </sub>
• Tables <table> </table>
• Rows <tr> </tr>
• Table data(Columns) <td> </td>
• Caption allows you to display a caption above the table and it should be the first HTML tag after the <table> tag
<caption> </caption>
• Table borders with <table> tag, the table is initiated but have no visible border. The word ‘border’ is an
attribute(further information). Attributes should be in lower case the values should always be enclosed in
quotes.
• Tables can have three sections: a header, a footer and a body section in this order only. These are defined using
the <thead>, <tfoot> & , <tbody> tags, and closed with </thead>, </tfoot> and </tbody> respectively. Notice
how these all begin with t (for table). Within each section add the correct number of table rows. You can add the
table data sections to the footer and body of the table using the tags <td> and </td>. Do not use these tags in
the table header instead In the table header, create heading cells using the tags <th> and </th> rather than the
table data tags
• Resize a table with attribute style width . Example: style="height:50px; width:400px“. These are embedded
styles
• Common in-style/embedded styles are style=“text-align:center; width:80%; margin-left:auto; margin-
right:auto; border-collapse:collapse; border:solid 4px #FFFF00; vertical-align:middle; ”
• Column merge  colspan=“3” and rows merge  rowspan=“4”
• Add an ID attribute to each table so we can identify them: they will be called top, middle and bottom. Example:
<table border="1" id="middle" style="padding:25px">

3
HTML tags:
Website Authoring
insert image  <img src="turtle.jpg" alt="Company Logo“ width=“300px” height=“100px”>
Raster or bitmap graphics are JPEG files, GIF files or PNG
Vector graphics SVG
Insert a video file:
<video width=“300px” height=“240px” controls>
Your browser does not support this type of video
<source src=“abc.mp4” type=“video/mp4”>
</source>
</video>
Insert an audio file:
<audio controls>
Your browser does not support this type of audio file.
<source src="whale.mp3" type="audio/mpeg">
</audio>

Set the background colour : background-color written with style attribute.


Examples:
<thead style="background-color:#32879b">
<tfoot style="background-color:#92cddc; color:#ff0000">
Bookmarks  Named reference point often used to hyperlink to that point from other locations.
Hyperlinks  A method of accessing another document or resource from your document. They are used to create
menu options with web pages, using either text or images. It will perform an action and transfer the control to
another location.
Anchors An anchor is used to create a hyperlink to allow you to navigate within the page or to an external page.
The tag is <a href=“abc.htm” target=“_blank”>click here</a> tag.
Division tag It is a container. You can keep any information in it. <div> tag and ends with a </div>
Comments in a style sheet /* Clara */

4
HTML tags:
Website Authoring
hyperlink to emails
p><a href="mailto:graham.a.brown@hotmail.co.uk?subject=IGCSE%20Book">Click here to contact us
page</a></p>
If the subject has space between it, it should be written using %20
Email id and subject are separated by ?

Attaching External style sheet


<link rel="stylesheet" type="text/css" href="tablestyle.css">

Use metatags
It uses the <meta> tag to open it and the </meta> tag to close it. We will use only three attributes with the <meta>
tag, these are: charset, name and content.
UTF-8, which is for Unicode, and ISO-8859-1, which is for the Latin alphabet.
<meta charset="UTF-8">
<meta name="author" content="Graham Brown">
<meta name="description" content="Advice for practical web page creation">
<meta name="keywords" content="HTML, web page creation, web development, stylesheet, WYSIWYG">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Set a default target window (place in the head section of the page)
<base target=" _ blank">

Apply styles and classes to the HTML (see the following example:)
<body>
<h1>Chapter 21</h1><hr>
<h2 id="top">Advice for practical webpage creation</h2>

<a href=“#top”>click here</a>


5

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy