Creating your first website Web Design using HTML & CSS Create a webpage using Notepad Identify the use of different tags Add text to the website
Exercise 1: Create a folder In your ICT/ Computing folder create a folder called ‘HTML’
Exercise 2: Web Page Layout Click on Apps (on the desktop) > Tools open Notepad and enter the following: <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Click on File > Save As, navigate to the My Website folder you created, name it First WebPage.htm and click on Save. Note: It is important to add the .htm file extension after the file name to make the file become a web page. Open My Website folder, notice that the file is showing as a web browser file type. To view it, double click on the file and the following web page will be display. Start tag Notice there is always a start tag and an end tag. End tag
Exercise 3: Adding Text To edit the web page, select the web page by left clicking on it. Click on Open dropdown arrow menu at the top> select Notepad as show below Add a header text and body text as shown below in bold, onto the Notepad document. <HTML> <HEAD> <TITLE> My First Web Page </TITLE> </HEAD> <BODY> This is my first web page (your name) </BODY> </HTML>
Switch to the web browser and refresh the page by pressing on F5. Click on File – Save. Switch to the web browser and refresh the page by pressing on F5. Your page should be display as follow Take a screenshot of both your Notepad page website page side by side in a powerpoint as shown on the next slide. Add a title to the powerpoint - ‘My first website’ Save this powerpoint in your MyWebsite Folder Notice the header Notice the body
Add the text boxes and arrows like I have shown here. Header Website Body Notepad Add the text boxes and arrows like I have shown here.
Exercise 4: Paragraph It is important to realise that to split your text into paragraphs when it is displayed you must either use the paragraph tag <P> or the line break tag <BR> Open a new notepad and copy in the code on the right Save this notepad as a new file Click File> Save as - “Paragraph.htm” <HTML> <HEAD> <TITLE>Paragraph</TITLE> </HEAD> <BODY> <P> This is my first web page.</P> <BR> <P>I hope you like it! </P> Good-bye for now. </BODY> </HTML>
Open the file on web browser and your page should display something that looks similar to the page below. Again take a screenshot and show both the web browser and notepad on another slide with a heading ‘Paragraphs ‘.
Task Open up your last notepad (paragraph) Open your HTML powerpoint Make sure you have the definition of HTML Find 2 more things about HTML and add these to your powerpoint.
Task 1 Write out what HTML stands for , and 2 bullet points about HTML Use the following website to help http://www.w3schools.com/html/html_headings.asp Find out the what the different headers are in HTML (use website above) Add them to a new notepad document – save as Headings.htm Show a screenshot of both the web browser and notepad on a a slide in your powerpoint with a title – Headings.
Task 2 Find the song lyrics to your favourite song – no inappropriate songs with any swear words in. Add these to a new notepad document Add the appropriate HTML Tags (<p>, <br>, headings, HTML, BODY, TITLE, HEAD) Save it as a .htm file and take a screenshot and add it to your powerpoint. Look up how to add colour on the webiste. Don’t forget to add start tags and end tags otherwise it will not work.