Introduction to HTML Hypertext Mark-up Language

HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a web page in an editor providing you save it as a text file File extension: HTML or HTM

Enabling File Extensions Go to My Computer (if using Windows 7) Click Organise (top left) Select Folder & Search Options Click the View tab Untick Hide Extensions for known file types

File Extensions When creating web pages you need to see the file extension, e.g. homepage.html is a web page mystyle.css is a cascading style sheet myscript.js is a JavaScript file login.php is a PHP server-side script

Notepad Notepad – basic text editor (or right click inside a folder > New > Text document) Click Start > All Programs > Accessories > Notpad Also change setting to word wrap You can start creating a web page soon

Notepad Create a page, then use Save as Make sure file type set to All files

Notepad ++ Notepad ++ is an alternative freeware plain text editor which you can download on your home computer

Notepad ++ Set the language to HTML to make it colour coded when you type

Exercise Open Notepad ++, Notepad or use Dreamweaver Enter the following code: Basic introduction to HTML using Notepad to create web pages Hello World

Notepad ++ This the basic structure of a web page

Notepad ++ Type it and save the page as: index.html Create a folder to save your work as well

Notepad ++ Use Run > Launch menu to open in browser

Web page opened in browser Page opened up in browser - did you get it to work?

Web page opened in browser Notice where the and tag text go

Word Wrap Click the word wrap button so code wraps in window

Add more to page Replace Hello World with new text

Open in web browser Save. Click Run > Launch in Chrome

Change the background colour Edit the tag and try different colours

Open in web browser Save. Click Run > Launch in Chrome

Use Header & tag Notice the colours of the source code changing

Open in web browser Save. Click Run > Launch in Chrome. Notice the font change

Add a background image Save bg.gif into your folder as well

Open in web browser Save. Click Run > Launch in Chrome. Notice background repeats

Create a second web page Save the second page as web.html

Open 2 nd page in web browser Save. Click Run > Launch in Chrome. Click the link

Link on should go to 1 st page Save. Click Run > Launch in Chrome. Click the link to go back to first page

Add a picture to the page Save tim.jpg to your folder and add the tag

Add a picture to the page Check the image is on the page

Align picture left or right Although the professional way to align images is using CSS, you can align a picture using HTML To align using HTML, use the align=“left” or align=“right” attribute To add margin using HTML, use vspace or hspace attributes e.g.

Align picture left IMG SRC="tim.jpg" align=“left" hspace="20" vspace="20">

Align picture right IMG SRC="tim.jpg" align="right" hspace="20" vspace="20">

The CSS Method for aligning CSS = Cascading Style Sheet Using the STYLE attribute you can add CSS directly to the element (tag) Use FLOAT and MARGIN to align left or right and to add a gap around the image e.g.

ALT Attribute E.g.

ALT Attribute The ALT attribute is important for users who are unable see the images on the web page. ALT provides “alternative” text to the image E.g. A blind user would use a speech browser which “speaks” the page Large companies that do not provide ALT alternatives may be discriminating against some users Search engines also read ALT text so using them helps your site get found

ALT Attribute

General Questions Why is the element important? Is BODY an element (tag) or attribute? Name 2 file extensions for an image Can HTML be entered in lowercase letters? Does HTML recognise multiple spaces? How do you create an extra space? Which is the preferred method for aligning images (CSS or HTML)?