HTML and Website Development
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
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
Where are all the websites stored? Websites are stored on web servers all over the world There is no central storage of websites
What happens when I view a web page? Your Computer Your ISP Website Host / Server Internet
Introduction to HTML HyperText Markup Language is the language of the web It describes the content in web pages
Web Pages
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:
<Opening> and </Closing> tags <holiday> Swimming Sandcastles Sightseeing </holiday> Without the closing tag we would all be in a permanent state of ‘holiday’!
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
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
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
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
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
Changing the alignment Inside the <h1> tag write <h1 style="text-align:center"> Save and refresh the browser
Adding text and images
Adding breaks and links
Your Finished Page
HTML and Website Development CSS HTML and Website Development
What web page styles can you change?
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">
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
CSS Syntax Selector Declaration h1 {color: blue;} Property Value
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
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>
The <div> tag Divide up your page using the <div> tag Each <div> section can have its own formatting applied Content Header Navbar Container
Margins, Borders and Padding Content Padding Border Margin
Responsive Design Websites are viewed on different size screens Webpages must automatically adjust to fit Set widths as percentages rather than pixels
What makes good web design?
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
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
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
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?
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