Download presentation
Presentation is loading. Please wait.
1
HTML and Website Development
2
Learning Objectives All to learn what HTML is and what it is used for
Most to type basic HTML tags using a text editor to create a page that can be viewed in a browser Some to write CSS code to set styles, e.g. background colour of sections of the page; size, font, colour and alignment of text
3
World Wide Web (WWW) The World Wide Web is a huge collection of websites that we can access using the Internet Each website contains web pages which are navigated to via hyperlinks Web pages contain different types of information including images, text and multimedia
4
Where are all the websites stored?
Websites are stored on web servers all over the world There is no central storage of websites
5
What happens when I view a web page?
Your Computer Your ISP Website Host / Server Internet
6
Introduction to HTML HyperText Markup Language is the language of the web It describes the content in web pages
7
Web Pages
8
Web Page Code You can look at the HTML code behind a web page (Ctrl + U or View, Source) The first few lines of code behind this page look like this:
9
<Opening> and </Closing> tags
<holiday> Swimming Sandcastles Sightseeing </holiday> Without the closing tag we would all be in a permanent state of ‘holiday’!
10
Parts of a Web Page Websites are made up of a Head and a Body Head
Can you guess what any of the code lines do? For example, look at line 5: <title>Welcome to GOV.UK</title> What might this do? Head Body
11
Editing HTML Code Copy the Australia.html and Australia.jpg files to your own file area Open Australia.html in a browser Open the source code in Notepad Make changes to the source code and Save View the changes in a browser Things to try changing: Background and text colours Title and body text Font sizes Alignment Width of the picture Links
12
Writing HTML Code Copy the NewZealand.html and the NewZealand.jpg files to your own file area Open the NewZealand.html file in a browser Open the same file in a text editor such as Notepad or WordPad
13
Writing HTML Code Write a title in between the <title> and </title> tags Save the webpage using File, Save or press Ctrl+S Switch to the Browser and refresh or press F5. View your changes
14
Adding a heading After the <body> tag write <h1></h1> In between the new heading tags, write some text Save the html file and refresh the browser to view your changes
15
Changing the alignment
Inside the <h1> tag write <h1 style="text-align:center"> Save and refresh the browser
16
Adding text and images
17
Adding breaks and links
18
Your Finished Page
19
HTML and Website Development
CSS HTML and Website Development
20
What web page styles can you change?
21
CSS (Cascading Style Sheets)
HTML defines the structure and content of your web page CSS defines the style and layout of web pages CSS can be used to change the style of a whole website, one web page or a single occurrence of an element, e.g. <h1 style="text-align:center">
22
Embedded styles <style> h1 {color: blue;} </style
Style declarations are placed in the <head> section of a web page, between new <style> </style> tags To change the heading colour, for example: <style> h1 {color: blue;} </style
23
CSS Syntax Selector Declaration h1 {color: blue;} Property Value
24
Adding CSS to a web page Define the style at the top between the <style> tags <style> h1 {color:blue; text-align:center} </style> </head> <body> <h1> SEE AMAZING SCENERY </h1> Everything that falls inside that tag or selector in the html body adopts that style
25
Change the style of links
Add CSS to apply styles to the <a> tag: Test your code! <style> h1 {color: ADD A COLOUR HERE; font-size: 24pt;} a:link {color: INSERT COLOUR HERE;} a:visited {color: INSERT COLOUR HERE;} a:hover {color: INSERT COLOUR HERE;} a:active {color: INSERT COLOUR HERE;} </style>
26
The <div> tag Divide up your page using the <div> tag
Each <div> section can have its own formatting applied Content Header Navbar Container
27
Margins, Borders and Padding
Content Padding Border Margin
28
Responsive Design Websites are viewed on different size screens
Webpages must automatically adjust to fit Set widths as percentages rather than pixels
29
What makes good web design?
30
Common Web Design Features
Limited colour palette Maximum 3 colours (+ black & white) Limited font selection Maximum 3 different font styles Common interface across all pages All pages in a site look similar with a similar layout Navigation bar Helps to find your way around the site
31
Limit your Colour Palette
Keep to just 3 Colours (+ Black & White) Use either: colours next to each other on the Colour Wheel Colours opposite each other Three shades of the same colour
32
Keep a Common Layout Create a design that all pages can use
Keep links in the same place on each page Save development time - just change the content Header or Banner Links Content
33
Consider your Audience and Purpose
Define your audience clearly Young children learning to ride a bike Elderly people who have difficulty walking Parents who enjoy travel with young children Teenage boys interested in cars and racing What is the purpose of your website? To inform? To persuade? (maybe to buy?) To entertain? How will this affect your design?
34
Finally… Complete the plenary questions to show me what you have learnt today. Plenary questions should be completed and are available on the iTeach website
Similar presentations
