Scribd
Upload
64 views

CreatingWebPages Part1

The document provides an overview of HTML and the web development process. It discusses that HTML uses tags to define the structure and layout of web pages. It also explains that the basic structure of an HTML document includes <html>, <head>, and <body> tags. Additionally, it outlines the steps to create an HTML file using a text editor, upload it to a web server, and view it in a web browser.

Uploaded by

Educ
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
64 views

CreatingWebPages Part1

The document provides an overview of HTML and the web development process. It discusses that HTML uses tags to define the structure and layout of web pages. It also explains that the basic structure of an HTML document includes <html>, <head>, and <body> tags. Additionally, it outlines the steps to create an HTML file using a text editor, upload it to a web server, and view it in a web browser.

Uploaded by

Educ
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 19

Creating Web Pages

Part 1

OVERVIEW:
HTML-What is it?

HyperText Markup Language, the authoring language used to create


documents on the World Wide Web.
It defines the structure and layout of a Web document by using a variety
of tags and attributes.
The correct structure for an HTML document starts with
<html><head>(enter here what document is about)</head><body> and
ends with </body></html>.
All the information to be displayed on the Web page goes between the
<body> and </body> tags.
There are hundreds of other tags used to format and lay out the
information in a Web page.
Tags are also used to specify hypertext links, which allow Web developers
to direct users to other Web pages with only a click of the mouse on either
words or an image.
2

THE WEB DEVELOPMENT PROCESS


What Does HTML Look Like?
Sample Web Page

HTML that generated


this Sample Web Page*

* You can see the code underlying a Web page by selecting View / Source
from your browser menu.

THE WEB DEVELOPMENT PROCESS:


How do I create HTML code?
You can (1) create it
using Windows Notepad,

(2) save it as an
HTML file, and then

(3) view it locally using


your browser.

THE WEB DEVELOPMENT PROCESS:


How do I put my HTML files on the Web?
You can (1) get an FTP program
such as the free coreFTP,

(3) transfer (i.e., upload) your file(s).

(2) use it to sign on to a web host for


which you have an account, and then

THE WEB DEVELOPMENT PROCESS:


How do I view my Web page?
By typing its address into a Web browser:

HTML FILE STRUCTURE:


What are the basic structural elements?

The <html> tag should start at the beginning of the document and end after the close of the
body element.

The <head> element provides useful, but hidden, information about the page.

The <title> element is also found within most HTML documents.

The title is placed within the <head> element and so cannot


be seen when the page is displayed.
Most browsers display the title in the title bar at the top of
the browser window.
When an HTML document is published on the Web, search
engines will access the title element.
To attract users to your page, you should write a clear and
concise title that describes what the page is about.

The <body> element encloses the displayable content of the HTML documents. It
starts at the end of the <head> element and ends just before the closing <html>
tag.

HTML FILE STRUCTURE:


What are HTML Elements?

HTML elements are represented by


tags, which are enclosed in angle
brackets.
Most HTML elements include a start
tag, an end tag, and the content
between them.
HTML elements have their own
unique attributes that assign
specific qualifies, such as color, to
the element.
Attributes are always assigned
values that are enclosed in double
quotes and set equal to the
attribute name.

HTML FILE STRUCTURE:


What do I need to know about HTML syntax?

It is not casesensitive.

It ignores all white


space in a document
other than the single
spaces between
words.

When you nest


elements within other
elements, they must
close in the reverse
order in which they
were opened.

HTML FILE STRUCTURE:


Does neatness matter?
Code snippet #1
Yes, it does matter, because neat code
is much easier to create, edit, and
maintain. Here are some guidelines
to help you to create neat code:

Code snippet #2

Start each element on a new line


Leave a blank line between
elements that define large chunks
of content.
Indent elements that are nested
within other elements

10

LEARNING HTML:
Is there a quick way to practice writing and executing
code without having to create an .html file?
Yes! You can use W3Schools Tryit Editor* on the Web. You type your code in on the left, press
the button, and the result appear on the right.

* http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

11

HTML ENTITIES:
<h1> <h6>:

12

HTML ENTITY ATTRIBUTES:


<body bgcolor= text= link= alink= vlink=>:

13

HTML COLOR:
Hexadecimal Color Codes

14

CONTROLLING TEXT FLOW:


<br>

15

CONTROLLING TEXT FLOW:


<p></p>

16

CONTROLLING TEXT FLOW:


&nbsp;

17

CONTROLLING TEXT FLOW:


<hr >

18

LINKS:
The basic <a></a> tag

19

You might also like