HTML - ict4u.net

Download Report

Transcript HTML - ict4u.net 

HTML
Basic concepts of web design
What do you need to know?
 What
is HTML?
 What
is an HTML editor?
 HTML
syntax
 Structure
 Head,
 Other
tags:
 Link,
script, form, input,
tags:
Title, Body
 Basic
text and text
formatting:
 H1,h2,h3,
div, p, li, ol,ul
2
A Metaphor for HTML:

In the same way that people talk/ communicate, be it two people or a group;
computers need to do the same.

They connect through a network and as a result achieve their
communication.
AJK Sept 2016
3
The WWW

The Web, or World Wide Web, is basically a system of Internet servers that
support specially formatted documents.

The documents are formatted in a markup language called HTML (HyperText
Markup Language)

HTML supports links to other documents, as well as graphics, audio, and video
files
AJK Sept 2016
4
Heirarchy
HTML
Web page/s
Website/s
www
5
What is HTML?

HTML (Hypertext markup language) is the set of markup symbols or codes
inserted in a file intended for display on a World Wide Web browser page.

The markup tells the Web browser how to display the page's words and images
for the user.

HTML is NOT a programming language.

HTML may be the most common use of a markup language but is isnt the only
one and far from the first

In the past typesetters used to mark up an authors typewritten notes to tell
the printer what font and style to use
AJK Sept 2016
6
HTML tags

HTML pages are read by web browser (chrome, firefox etc)

They can be created in any text editor such as notepad

With the increasing complexity of web pages/sites they are normally created
in a WYSIWIG editor such as Dreamweaver.

HTML marks up i.e. describes how the browser is to display an item of text or
an image

Tags are use to mark up the content

HTML tags are surrounded by angle brackets eg <HTML>
AJK Sept 2016
7
HTML Elements

An HTML element usually consists of a start tag and end tag, with the content
inserted in between:


The HTML element is everything from the start tag to the end tag:


<tagname>Content goes here...</tagname>
<p>My first paragraph.</p>
Normally the open tag must be accompanied by a closing tag but some HTML
elements are empty (have no content) and do not have an end tag:

AJK Sept 2016
eg </br> element which indicates a line break.
8
Structure of an HTML document
Doctype identifies the document
as HTML to the browser
HEAD section contains meta (data about
data) tags that describe the page to the
browser.
Nothing in this section is visible to the
user
Body section contains all the elements
visible to the user
AJK Sept 2016
9
Activity

Create a website for an something that interests you (eg sporting, gaming,
celebrity etc)

Your site must have

At least 3 pages:
1.
2.
3.





Index or home page
Feedback page - collect comments and email address from the user
Registration page – collect user’s name, address, email and phone number
Navigation between the pages
Image(s)
Bullet list and/or Numbered list
Appropriate use of colour for text and background
Useful websites:
http://www.w3schools.com/html/
http://ict4u.net/HTML5/HTML5.php
AJK Sept 2016
10