3_Lecture 2.docx

Introductory Lab to Web Design The Basics HTML stands for Hyper Text Mark-up Language, and is the basic code behind web pages. You will be using software called Notepad++ to write your html. If you want to edit an html file you can open it in Notepad++ to make changes. An html file is just a page of text with lines of code set in tags. The tags are set in angled brackets < and >. The tags tell the browser how to display the contents of the page. Most tags come in pairs i.e. an opening and a closing tag For example Opening Tag Closing Tag What you use them for <html> </html> Writing in html <head> </head> All the info about your page e.g. <title> and <style> <title> </title> The title of your web page. This will appear on a tab or the title bar of the window (not the actual canvas area). <style> </style> How you want it to look <body> </body> All of the content goes between these tags. You can have lots of sections see diagram overleaf. <b> </b> bold <i> </i> italic <br> Break (like return) – doesn’t need to be closed <h1> </h1> (biggest) heading <img src=”pic1.jpg”> </img> Putting an image in your web page - see exercise 6 HTML web page elements You start by telling the browser how this page is written in html like this <!DOCTYPE html> <html> At the start there’s some information about the title of our webpage and how we want the browser to display it. This goes in a part of the page called the head. It’s important to notice that each page only has one head, and that the head is different from the header. Here is how basic HTML code is structured. Note that it is indented – this makes it easier to read, and to spot when you don’t close your tags. <!DOCTYPE html> <html> <head> <title>My website</title> </head> <body> This is where you insert your content: Headings Text you type Images Tables Links to other pages </body> </html> This shows a typical arrangement of various elements of a web page – more about this later in exercise 12: CSS CSS stands for Cascading Style Sheets CSS defines how HTML elements are to be displayed HTML was never intended to contain tags for formatting a document so styles were added to HTML 4.0 to solve a problem From HTML 4.0 onwards, all formatting should be removed from the HTML document, and stored in a separate CSS file. This is what professional web developers do and CSS saves them a lot of work You will be using HTML 5 which was introduced in October 2014 Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a <style> element in the HTML <head> section External - using one or more external CSS files In this tutorial you will use internal styling, because it is easier to demonstrate, and easier for you to try it yourself Exercise 2 – Add style by changing the background colour Open Notepad ++ Save this file as background.htm in your HTML folder Add the html tags below: <!DOCTYPE html> <html> <head> <title>Background</title> </head> <style> body {background-color:yellow} </style> <body> <p>My last page was dull</p> <p>This one has a background colour!</p> </body> </html> Make sure you spell background correctly with a g! Note ‘color’ is spelt in the American way where it is part of the code Save and look at it in IE, it should work straight away The <p> tag is called the paragraph tag and anything typed between the opening <p> and closing </p> tags will display as a paragraph. Now try some different colours The style tag sets the style for the body. You can also include different styles for paragraphs and headings by expanding your style sheet like this: <style> body {background-color:lightgrey} header {background-color:midnightblue} section {background-colour:powderblue} h1 {color:white} h2 {color:aqua} </style> Save and view your work in IE to check you like the effect. Notice that if you say what colour you’d like your header to be it will only show up when you add a header. Mark your progress and colour choices on your sheet as you go along to help remember your favourites! Exercise 3 – Headings and sub headings Open Notepad ++ Save this file as headings.htm in your HTML folder Type in the tags below: Save your work then open it in IE to view your page. It should look like this … You can format your text by adding these tags <b> all the text here will be BOLD </b> <i> all the text here will be italic </i> <u> this will be underlined</u> <br> will add an empty line; no closing tag needed Exercise 6 – Adding an image On the Internet find an image you would like to include, or use the one on Moodle Click on the image and drag it into your HTML folder. Note that the image file must be saved in the same folder as the web pages. Rename the image to have a short name. Open Notepad++ Save this file as picture.html in your HTML folder In the example below an image called “Simpsons” was inserted into the page. You need to replace the word “Simpsons” with the name of your saved image You will also need to enter the type of image: jpg or gif or png. In the example below a png is used. Generally photos are jpg, and cartoon pictures are gif or png. Type in the html tags below: If it doesn’t work first time check the following before asking your teacher for help! image is saved in the right place image is saved in the right file format (.jpg .gif .png all ok) your html tag matches the name and file extension exactly you have written the tag out exactly as above Save your work again then open it in IE to view your page. If you get it to work first time very well done! Extension tasks Can you work out how to centre the image? See exercise 5. Go on the Internet again, and find an animated image. Save it to your HTML folder then insert it into your web page. Save the file again then run in IE to view the change to your page. Changing the size of an image You can set the size of your image if it appears too big or too small on your web page. To do this add the height and width attributes, for example: <img src="simpsonsfamily.png" height="300" width="200" /> Exercise 7 – Linking to a website Open Notepad++ Save this file as hyperlink.htm in your HTML folder. Type in the HTML tags below: <!DOCTYPE html> <html> <head> <title>Hyperlink</title> </head> <style> body {background-color:#f82} p {font-family:courier; font-size:160%;} </style> <body> <p> This is a link to <a href="http://www.bbc.co.uk/news">BBC news</a>. </p> </body> </html> Save your work again then open it in IE to view your page. Test your hyperlink. Note that you have to put some text to act as the link. In the example the text ‘BBC news’ will be in blue & underlined to show it’s a hyperlink. This text goes after the opening <A HREF…> tag, and before the closing </A>.

Document Details

Related

Full Transcript