Website Design Booklet

WEBSITE
DESIGN
Create a new folder in your H:Drive within your IST folder called Website
Development.
Within this folder create a tutorials folder to save the files created
in this booklet.
We will be using Notepad++ to code our websites.
VOCABULARY AND GLOSSARY
Browser
Cookie
Email
Firewall
HTML
HTTP
Internet
Intranet
Packet
Protocol
Search Engine
URL
World Wide Web
What to consider before designing a website:
Good Design Principles:

1
2
3
4
5
6
7
8
9
10
WHAT IS HTML?
HTML is short for ___________________________________. It is a method for telling a web
browser (E.g. ________________________________________________) how to display
text, image, video, animation, audio and other multimedia content.
E.g. A journalist and his/her boss-the editor. The journalist writes a story and the editor uses
a red pen and "marks up" all the text that needs attention. For example, a circle might be
drawn around a word with "i" (for "italics") noted in the margin. The journalist receives the
story back and can make sense of the editor's notes, because in the publishing world there
is a set of rules for such text editing.
HTML works this way. Web page content is placed in a text document and then "marked up"
with special codes or tags. A web browser like a journalist interprets the codes and knows
how to format and display the page content.
Where an editor might use a red pen, HTML uses a set of angle-brackets <>. Anything inside
the angle-brackets is interpreted as HTML markup code. Anything outside is text content. A
web browser will only show the content and the effect of the markup code, but not the
code itself.
E.g. This is a very important statement!
WHAT IS CSS?
CSS is short for ___________________________________.
CSS is an extension of HTML that specifies how web page elements should be styled and
positioned.
NAMING CONVENTIONS
If the page is to be the home page for the website, then set the file name as index.html.
Pages should be named unambiguously to represent the information on the web page.
SAVING CONVENTIONS
All files associated with a website should be located in ONE folder. It is appropriate to also
place within this folder, subfolders for images and video/audio content.
BEFORE STARTING TO CODE WEB DESIGN

It is important to think about the design of both your webpages and your whole website.
To design your site
Figure out why youre creating this site. What message or content do you want to convey?
What is the theme?
Think about your audience. How can you tailor your content to appeal to this audience? For
example, should you add lots of graphics or is it more important that your page downloads
quickly?
How many pages will you need? What sort of structure would you like it to have? Do you
want to go through your site in a particular direction, or do you want to make it easy for
them to explore in any direction? Will you use a menu?
Sketch out your site map (navigation chart) on paper.
Storyboards
An annotated PLANNED design of EACH page BEFORE the page is made.
CLEARLY expresses content, placement of multimedia elements (images, videos, buttons)
and colour. Remember consistency is key.
Media elements are represented as:
e.g.
Storyboard Task
Mr Krust has asked your IST class to design a new Carlingford High School Website.
Create a Storyboard to present to him. Insert your storyboard below.
TAGS & PROPERTIES OF

HTML & CSS
HTML tags are how the browser
knows how to format the content on
the page.
They are always encased in < > and
most come in pairs.
HTML5 W3Schools
CSS3 W3Schools
Starting a HTML Document

Creating your Basic HTML Template:
The Tags:
<!DOCTYPE html>
Specifies to the browser that the language it should expect is HTML
<HTML> </HTML>
The beginning and end of the document
Tells the browser that everything in between is HTML
<HEAD> </HEAD>
Directly after the HTML tags
Adds descriptions to the webpage these are not shown in the browser window
Contains meta tags and title tags
<TITLE></TITLE>
This is the page heading this is still not text on the actual webpage.
<BODY></BODY>
The visible content that makes up your webpage.
Includes: paragraphs, lists, tables and videos/images.
Tags are placed below the head tags, yet still within the HTML.
WEBSITE TASK #1
Create a Basic Template with the TAGS outlined above. Save your file as template.html in
the Website Development folder you created. Paste your code below.
<other common tags>

 paragraphs
 breaks (or returns)
<h1> </h1> (goes all the way to h6) these are heading tags preformatted
 bolds text
 italics
 both italics and bold
WEBSITE TASK #2
Copy your as template.html code and save it as commontags.html in the Website
Development folder you created. Add 10 paragraphs of text (lorem ipsum); each with a
subheading, at least 2 breaks, and the 6 different heading tags (h1 to h6) used appropriately
to represent text on a webpage. Add bold, italic and strong features to the text at random.
Paste your code below as well as a screen shot of your code.


This helps people reading your code to understand what is going on and is MANDATORY.
It wont be viewed in the webpage.
E.g. 
WEBSITE TASK #3
Add comments to your commontags.html webpage. Paste your code below.
<Meta Tags>
Data about data and the webpage.
Located in the header tags.
Can include information about the
author, type of editor used, description
of the content, relevant keywords and copyright information.
<META NAME="author" CONTENT="put your name here">

<META NAME="DESCRIPTION" CONTENT="Give information about the page">
<META NAME="keywords" CONTENT="words for searching">
<META NAME="copyright" CONTENT="information about the copyright">
WEBSITE TASK #4
Add at least these 4 metatags to your commontags.html webpage. Paste your code below.
(any other page you create will also need these tags added)
Adding links
The <a></a> tag is used to define hyperlinks.
Joining pages:
To add a second page to your website it is important that they are located in the same
folder. Also ensure you are not working off a USB device.
<a href="pagename.html">Text to click is written here</a>

Links to outside sources:
The same tag is used for linking to other websites only it is important to add the EXACT URL
for the page required.
<a href="URL">Text to click is written here</a>

WEBSITE TASK #5
Create another page called addinglinks.html, include 2 paragraphs of text and a heading that
describes the feature of the page in H1. Create a link to your addinglinks.html page in your
commontags.html page and a reverse link to toggle between the 2 pages. Also create a link
on either page to direct a user to Google.com.au. Comment your code completely. Paste
your code below for both pages.
commontags.html
addinglinks.html
Adding Images
The <img src> tag is used to add images. There is no pair/end tag.
<img src="imagename.filetype" alt="text that views if the image
doesnt" height="number in pixels" width="#px">
imagename.filetype can also be defined as a URL
WEBSITE TASK #6
Download at least 2 images and create an images folder within your tutorials folder. Save
them with logical names. Add these images to your addinglinks.html and commontags.html
webpages. Add an image via URL also to these pages. Comment your code thoroughly. Paste
your code and screenshots below.
Internal Links Anchors

CREATING AN ANCHOR
<a name=givemeaname>texttosee</a>
LINKING TO AN ANCHOR
<a href=#givemeaname>Textforclicking</a>
WEBSITE TASK #7
In your commontags.html web page, add a list to the top of
all the paragraph sub headings you used. Create anchors for
each paragraph and links to these anchors in the subheading
list. Paste your code and screenshots below.
Lists
1. There
2. are
3. ordered
All lists are opened and closed with <ol> or <ul> tags.
Every item within that list needs its own <li></li> tag.
4. <ol></ol>
and
unordered
lists
You can create multiple layers of nested lists.
<ul></ul>
WEBSITE TASK #8
Add both ordered and unordered lists to your webpages. Comment your code thoroughly
and paste your code and screenshot here.
DIVS
Webpages are better formatted and designed with divisions (divs). Divs also allow for block
markups. Divs are named intrinsically. It is standard to use a container to hold the other divs.
HTMLS adds several new structural elements to reduce the use of nonsemantic <div> tags
when marking up common blocks of content on the page such as sections, articles, sidebars,
headers, footers and navigation.
WEBSITE TASK #9
Download and open the Divs file from Moodle and rename it YourNameSampleDIVS.html.
Follow the modifications below.
1. Make all sections shades of red and yellow.
2. In the header, place the text YOURNAMEs First Div Website in h2 tag.
3. In the menu, place the words: Google, CHS and Wikipedia - turn the words to be in Arial
font and each to be a different colour. link them to the relevant sites.
4. In the footer put your name in bold and italics
This text is bold.
This text is italic.
http://www.w3schools.com/html/html_formatting.asp
5. Move the menu to the right.
6. Research divs and their advantages and disadvantages. Summarise the content and
place this information in the content div.
7. Place a RELEVENT image into the bottom of the content div and centre it.
8. Comment your code thoroughly and paste your code and screenshot on the next
page.
DIVS
ADDING VIDEO & AUDIO CONTENT

HTML supports ONLY MP4 files for video MP3 files for audio. Only supported in HTML5.
Files need to be saved in a separate folder in the same root folder as the webpage.
The below files are located in S:\Year10\ist\Website Development\AUDIOVIDEO
<video width=320 height=240 controls autoplay>

<source src="Snow.mp4" type="video/mp4">
</video>
<audio controls autoplay>
<source src="Applause.mp3" type="audio/mp3">
</audio>
WEBSITE TASK #10
Add a video and audio file to one of your tutorial pages. Comment your code thoroughly and
paste your code and screenshot here.
Activities
Creating a poem with paragraph:
Open the file poem.txt. Copy and paste the text into your template. Add appropriate
paragraph and line break elements to format the poem exactly as shown below.
Remember to give the web page a title and test it in a browser when you have
completed it.
Adding extra spaces: Type at any point of your document where you need a space.
E.g. Let's create SPACE in this world.
Recreate this file.
Preformatted text: The preformatted text tag <pre> allows you to add content and retain
all spaces and returns without the need to use or etc to force formatting. This
can be useful for displaying programming code or perhaps a visually formatted poem.
For example:
Recreate this file.
Computer code, input and output:
Recreate this file.
Creating Tables
Create a tables file with at least 6 columns with headings and at least 5 rows.
Open the file population.html. Remove the border="1" attribute. Style the table
using CSS so that it looks like the example on the right. Try changing the border
attribute to border-top to get just horizontal rules. Experiment with a range of CSS
styles (also search the web) to see what other effects you can do to style tables.
Syntax for embedding Flash content

Flash (.swf) movie files are embedded using the <embed> element, for example:
<embed src="movie.swf" type="application/x-shockwave-flash" width="500" height="400">
Add your animation to your commontags.html webpage
Embedding YouTube videos

If you don't have enough server space or bandwidth allowance to host large video files, you
can upload them to YouTube and embed them on your page. You can also embed videos
that others have uploaded and shared.
Visit http://www.youtube.com and click the Upload button, then follow the instructions
provided. You may need to log in to your existing account, or set up a new account first if
you don't already have one.
On the page containing the YouTube video you want to embed, click the Share button and
then Embed. You can make changes using the options below such as the size you want the
movie to display on your page and whether or not you want video suggestions displayed
after the video stops. The other defaults should be fine. Right-click the highlighted code and
choose Copy. Paste the code into your web page code.
The video is embedded using an element linked to the YouTube servers which
clearly generates either Flash objects or HTML5 video code depending on the browser or
device used.
Add a link to a YouTube video to your commontags.html file.

Website Design Booklet

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Website Design Booklet

Cargado por

Copyright:

Formatos disponibles

WEBSITE

VOCABULARY AND GLOSSARY

World Wide Web

What to consider before designing a website:

Good Design Principles:

BEFORE STARTING TO CODE WEB DESIGN

TAGS & PROPERTIES OF

Starting a HTML Document

<other common tags>

<META NAME="author" CONTENT="put your name here">

<a href="pagename.html">Text to click is written here</a>

<a href="URL">Text to click is written here</a>

Internal Links Anchors

You can create multiple layers of nested lists.

<p><b>This text is bold</b>.</p>

<p><i>This text is italic</i>.</p>

ADDING VIDEO & AUDIO CONTENT

<video width=320 height=240 controls autoplay>

Recreate this file.

Recreate this file.

Computer code, input and output:

Recreate this file.

Syntax for embedding Flash content

Add your animation to your commontags.html webpage

Embedding YouTube videos

Add a link to a YouTube video to your commontags.html file.

También podría gustarte