Scribd
Upload
44 views

HTML - Part 1 - Introduction To HTML

Uploaded by

api-675027102
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
44 views

HTML - Part 1 - Introduction To HTML

Uploaded by

api-675027102
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Today's lesson

● Lesson objective:
● Learn how to use HTML

● Learning outcome:
● Create a simple web page
Introduction to HTML

● Browsers, Servers and Web Sites.


● HTML
● CSS
● How to build your own web page.
The Internet

Browser
The Internet

Internet

Browser
The Internet

Internet YouTube

Browser
The Internet

Google

Internet YouTube

Browser
The Internet

Google

Internet YouTube

Every Other
Browser Website in
The World!
What is HTML?

● HTML is just a way to present the content of the page.


● It does not say anything about presentation – i.e. fonts,
colours, layout etc.
● Presentation is defined by a CSS file.
What is a CSS file?

● A CSS file defines all presentation information – i.e. fonts,


colours, layout etc.
● The CSS file is linked to from the HTML file.
● CSS, or Cascading Style Sheets, will be covered later.
HTML Example

●<!DOCTYPE html>
●<html>
●<body>

●<h1>My First Heading</h1>

●<p>My first paragraph.</p>

●</body>
●</html>
Glossary

● HTML – HyperText Markup Language


● CSS – Cascading Style Sheet
Practical - Create a Web Page

● Objective is to create a page containing the following;


● A Header
● Some Text
● A List
● A Table
● An Image
● A Hyperlink
● A Table

12
Practical : Step 1 - Create your HTML file

●Start Google Chrome.


●Visit stevem.info/test1.
●Use the keyboard shortcut CTRL + S
●Navigate to your unit 2 folder (create it if necessary).
●Change “Save as Type” to “Web Page, HTML Only”
●Click “Save”
●Close Chrome
●
● ***Make sure it is in your unit13 folder***
13
Practical : Step 2 - Open your HTML file

● Open Windows Explorer and navigate to your unit 2 folder.


● Right-click on your html file (test1.html)
● Click “Edit with Notepad++”
● NB If Notepad++ is not installed, use ‘Sublime’
programmers editor
● run from my ‘I:’ drive, sublime folder, sublime.exe

14
Practical : Step 3 - Edit your HTML file

● Change the text below where it says ‘change the


content…’
● Save your updated html file (File->Save or Ctrl+S)

15
Practical : Step 4 - View your HTML file

● Goto Windows Explorer (Alt-Tab)

● Right click on your file in Windows Explorer


● Select “Open With-> Chrome”

● Now you can update your html file in Notepad++ and see
the change in Chrome, just by clicking reload.

● Important - only make one change at a time, so if (when!)


things go wrong you will know what change to undo.
16
Practical : Step 5 - Learn HTML
● Visit w3schools.com
● Select “Learn HTML” from the menu on the left (not HTML5)
● Use the “Try It Yourself” button to experiment.
● Copy/Paste useful code into your test1.html file, save it and hit refresh in Chrome.
● Build up an example of each of the following elements in your file.

● Go through the following;


● Introduction
● Headings (h1, h2 etc)
● Paragraphs (p)
● Lists (ul, li etc)
● Images (img) - can use stevem.info/cat.jpg
● Links (a)
● Tables (table, tr, td)
● Ignore Formatting.
17

You might also like