Scribd
Upload
15 views

Chapter 21 - Website Authoring

Uploaded by

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

Chapter 21 - Website Authoring

Uploaded by

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

Website

authoring
CHAPTER 21
What is a
website?
What is a website?
• A website is a collection of web pages that are hosted to web server.

• Web Pages can include different objects such as text, sound, video and still
image.

• A web page is created using three layers, such as:

i. Content (Structure) Layer (Using HTML Language)

ii. Presentation Layer (Using CSS)

iii. Behaviour Layer (Using Javascript)


What is HTML?
• HyperText Markup Language (HTML)

• A standardized system for tagging text files to achieve font, colour, graphic,
and hyperlink effects on World Wide Web pages.

• HTML elements are delineated by tags, written using angle brackets.


<html>, <head>

• HTML file are written using a simple text editor (Notepad) or web-
authoring package ( Macromedia Dreamweaver, Microsoft Visual Studio
or Expression Web).
What is CSS?
• Cascading StyleSheet (CSS)

• A different text-based language.

• Styles are created and added to web pages.

• CSS file can also be created by simple text editor.

• Three types of CSS file

I. Inline CSS (also called embedded CSS)

II. Internal CSS

III. External CSS


Create a web page
<!DOCTYPE html>
<html>
<head>
<title> web page name </title>
</head>
<body>
<p> First Paragraph </p>
</body>
<! --This is a comment -->
</html>
*All text in HTML tags should be in lower case.
*One typing error may cause the web pages not to function as expected.
HTML tags
Paragraph tags - <p> </p>

Headings - <h1> </h1> (h1 to h6)

Bold - <b> Bold </b>

Italic - <i>Italic </i>

Underline - <u> Underline </u>

Superscripted - X <sup> 2</sup> X2

Subscripted - H <sub>2</sub> O H2O


Tables ( Basic Table Structure ]
<!DOCTYPE html>
<html>
<head>
<title> web page name </title>
</head>
<body>
<table>
<caption> Table Title </caption>
<tr>
<td> table data </td>
<td> table data </td>
</tr> <!– table row>
</table>
</body>
Table borders
• Table has been created but does not have a visible border.

• To show table border, used table’s border attribute

<table border=“1”>
• Merge Cell
• Column merge colspan

• Row Merge rowspan


Headers and footers in
tables
• Three sections of table
 Header

<thead>

<tr>

<th> heading (Bold & center align) </th>

</tr>

</thead>
Headers and footers in
tables
 Footer

<tfoot>

<tr>

<td> table data </td>

</tr>

</tfoot>
Cell padding & spacing
• The cell padding attribute places spacing around data within each
cell.

• The cell spacing attribute places space around each cell in the table.
Headers and footers in
tables
 Body

<tbody>

<tr>

<td> table data </td>

</tr>

</tbody>
Embedded CSS (inline CSS) in HTML

• Embedded CSS is an CSS instruction in a style attribute within the HTML


tag.

style=“property 1: value1;proterty2:value2”
Example :

<table border="1" style="width:400px">

<table border="1" style=“margin-left:auto; margin-


right:auto; width:400px">
Embedded CSS (inline CSS) in HTML

• Resize a table

– Wide width:400px; (or) width:80%;

– High height:20px;

• Center Align a table in a window

– Margin Left margin-left:auto;

– Margin Right margin-right:auto;

• Set table border width

– Table border border:solid 4px; / border:4px dotted red;

• Single table border

– Single table border border-collapse:collapse;


Embedded CSS (inline CSS) in HTML

• Horizontal Align cell content (left, right, center)


– Horizontal align text-align:center;

• Vertical Align cell content (top, middle, bottom)


– Vertical align vertical-align:middle;

• Cell Padding
– Padding padding:25px;

– Padding padding:25px 15px 20px 15px;

• Border Spacing
– Border Spacing border-spacing:20px 10px;
(border-spacing: horizontal spacing vertical spacing)
Image, Video & Audio
• Image
– <img src=“turtle.jpg” alt=“Company logo”> (*not include close tag)

• Video
– <video controls>

• <source src=“*****.mp4” type=“video/mp4”>

– </video>

• Audio
– <audio controls>

• <source src=“*****.mp3” type=“audio/mpeg”>

– </audio>
Lists
Ordered Lists (Number Lists) Unordered Lists (Bulleted Lists)
– <ol type=“A / a / i / I/1”> – <ul style=“list-style-type :

• <li> item1 </li> disc/ circle / square”>

• <li>item2 </li> • <li> item1 </li>

– </ol> • <li>item2 </li>

– </ul>
Hyperlink
• Internal Link
target attritube
– <a href=“#Top”> Go to Top of the page </a>target=“_blank” (to open new

– <div id=“Top”> </div> tab)


target=“_self” (to open in the
• External Link
current window)
– <a href=“http://www.hoodereducation.co.uk”> Hooder Education </a>

• Email
– <a href=“mailto:[email protected]?subject=IGCSE
%20Book&amp;body=Add%20Body”> Contact Us </a>
Metadata
• Metadata means data about other data

• The metadata about the HTML document is not displayed in the browser

• Metatag is a tag that hold metadata. ( <meta> </meta> )

• Metatags are not displayed in the browser but hold important information that the browser
requires, such as specifying
– the character set, These functions tell browsers how to
– page description, display the page and they tell search
– keywords, engines about keywords, which helps
– author of the document, and them list the page in the results of
– the viewport settings. relevant searches
Metadata
• Meta attribute charset : To define the character set used by a web page,
we use the charset attribute.

• This specifies the type of characters (called the character encoding) that
are displayed.
Metadata
• Meta attribute - name : The name attribute is used to specify the four
other elements, these are: author, description, keywords and viewport.

• Each of these name attributes is followed by a content attribute.

• Metatag attributes – content : The content attribute is used with the


name attribute and contains the value assigned to the name.

• This value is in the form of text.


base
<base target=“”>

• If you have a web page with several hyperlinks that require the same type
of action (same target window/tab or a new window/tab)

• you can make this the default setting for the page by using base tag in the
head section.
base
<base href=“” target=“”>

To specify

• the document base URL for the purposes of resolving relative URL

• the name of the default browsing context for the purposes of following
hyperlinks

• A base element must have either an href attribute, a target attribute,


or both.

• There must be no more than one base element per document.


non breaking space
(&nbsp;)
1. A non-breaking space is a space that will not break into a new line.
– Two words separated by a non-breaking space will stick together (not break into
a new line).

Examples: 10 km/h

2. Another common use of the non-breaking space is to prevent browsers


from truncating spaces in HTML pages.
– If you write 10 spaces in your text, the browser will remove 9 of them.

• https://www.w3schools.com/html/html_entities.asp
External Stylesheet
• Using styles in your web pages helps you to be consistent.

• Using styles is much quicker and easier than applying individual settings.

• External stylesheet is attached to the web page in the head section.


Font-family
• Generic font families
– Serif Example-
h2 { font-family: “Times New Roman”, serif}
– Sans-serif
• The browser will look at the list of fonts installed in the
– Cursive
machine and will try to find “Times New Roman” first.
– Fantasy • If it cannot find it, it will find any generic serif font that

– Monospace is available.

• Individual fonts can be specified but these are not always


available in all browsers.
Font-Size (Absolute Values)
Point - pt Relationship
1 inches = 72 pt
Pica - pc
1cm = 28pt
Pixel - px 1pc = 12pt
Inches - in 1px = 1pt (for older monitor)

Centimeter - cm
Example
Millimeter - mm 36pt = 0.5in / 1.3cm / 3pc / 36px
18pt = 0.25in / 0.7cm / 1.5pc / 18px
12pt = 0.17in / 0.4cm / 1pc / 12px
Font-Size (Relative Values)
em Relationship
1em = the current font size (default font size)
ex
2em = twice of the current font size
percentage (%)
1ex = half the height of the current font size (height of letter – x)
xx-small, x-small, 200% = force the font to be twice the size of current paragraph style

small
medium

large, x-large, xx-


large
Text Align & Enhancement
ALIGN TEXT ENHANCE TEXT
h2 { font-weight: bold;
• h2 {text-align: left;}
font-style: italic;
• h3 {text-align: right;} text-decoration: underline;
• h4 {text-align: center;} }

• p {text-align: justify;}
T E X T C O LO R

h2 { font-weight: bold;
font-style: italic;
color: #00ff88;
}
Background Color & Image
background-color : #F39E0A;

background-image: url(“****.jpg”);

background-repeat : no-repeat / repeat / repeat-x / repeat-y;

background-position : right top;

margin-right : 200px; (this property can force the contents away from
the image)
Classes with CSS
• In the stylesheet, you can define a class by using full stop or dot (.)
symbol.

• very useful for adding to or changing styles without defining completely


new styles.
Table Background, Border & Gridlines

background-color : #FF00EB;

border-collapse : collapse/separate;

border-style : solid; (dashed, dotted, double)

border-width : 4px;

border-color : #FF0000;
Publish a website
• Every webpage and elements (images, audio, video and external css files) has been
stored in a single folder.

• Websites must have domain name (www.hodder.co.uk) to find the site.

• Websites must be registered with your desired domain name to the sever.

• You need to upload the website

• all the files in one folder

• an FTP client

• login details to a web hosting server that includes the name of the FTP host
and the port used and the username and password for the FTP.
Test a website
F U N C T IO N AL T E S T IN G

• For each web page • For the entire website test:

1. Is the table structure correct? 1. Can each page be found from


2. Do all images appear as planned? the expected URL?

3. Are all objects that are not 2. Do all links between pages work
supposed to be visible hidden as expected?
from the user? 3. Do all external hyperlinks open
4. Do all internal hyperlinks work? the correct web pages?
Test a website
U SER T EST IN G

1. Decided what needs to be tested.

2. Find a suitable test audience of between two and five users or potential
users.

*If a website is not designed for a specialist audience, select a variety


of different users.

*Do not use IT specialists.

3. Tell the users it is the website being tested not them, and that you value
their thoughts and opinions.

4. Ask the users to speak their thoughts as they work but do not respond.
Any
Question

You might also like