Website Making

8/6/2019 Website Making

1/29

Website Making


2/29

An HTML element is everything from thestart tag to the end tag:

HTML Elements

Start tag * Element content End tag *

This is a paragraph

This is a link


3/29

An HTML element starts with a start tag /

opening tag An HTML element ends with an end tag /

closing tag

The element content is everything between thestart and the end tag

Some HTML elements have empty content

Empty elements are closed in the start tag

Most HTML elements can have attributes

HTML Element Syntax


4/29

This is my first paragraph.


5/29

This is heading 1This is heading 2This is heading 3This is heading 4This is heading 5This is heading 6

HTML Heading< > < > .Headings are defined with the h1 to h6 tags


6/29

HTML Lines

< />The hr tag creates a horizontal line in an HTML.page

:The hr element can be used to separate content


7/29

The hr tag defines a horizontal rule:

This is a paragraph

This is a paragraph

This is a paragraph


8/29

Comments can be inserted into the HTMLcode to make it more readable andunderstandable.

Comments are ignored by the browser andare not displayed.

HTML Comments


9/29

This is a regular paragraph


10/29

HTML Tag Reference

Tag Description

Defines an HTML

document Defines the document'sbody

to Defines HTML headings

Defines a horizontal line

Defines a comment
http://www.w3schools.com/tags/tag_html.asphttp://www.w3schools.com/tags/tag_body.asphttp://www.w3schools.com/tags/tag_hn.asphttp://www.w3schools.com/tags/tag_hr.asphttp://www.w3schools.com/tags/tag_comment.asphttp://www.w3schools.com/tags/tag_comment.asphttp://www.w3schools.com/tags/tag_hr.asphttp://www.w3schools.com/tags/tag_hn.asphttp://www.w3schools.com/tags/tag_body.asphttp://www.w3schools.com/tags/tag_html.asp


11/29

This is a paragraph.



HTML Paragraphs


12/29

Use the
tag if you want a line break(a new line) without starting a newparagraph:

The
element is an empty HTML

element. It has no end tag.

HTML Line Breaks


13/29

This is
a para
graph with line breaks


14/29

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


15/29

HTML Text FormattingTagsTag Description

Defines bold text

Defines big text

Defines emphasized text

Defines italic text Defines small text

Defines strong text

Defines subscripted text Defines superscripted text

Defines inserted text

Defines deleted text
http://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_del.asphttp://www.w3schools.com/tags/tag_ins.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_sup.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_font_style.asphttp://www.w3schools.com/tags/tag_font_style.asp


16/29

< >html

< >body

< > < > < / > < / >p b This text is bold b p

< > < > < / > < / >p strong This text is strong strong p

< > < > < / > < / >p big This text is big big p

< > < > < / > < / >p em This text is emphasized em p< > < > < / > < / >p i This text is italic i p

< > < > < / > < / >p small This text is small small p

< > < > < / >p This is sub subscript sub and

< > < / > < / >sup superscript sup p

< > < > < / > < / >p del deleted del p

< / >body

< / >html


17/29

Tag Description

Defines an abbreviation

Defines an acronym

Defines contact information for theauthor/owner of a document

Defines the text direction Defines a definition term
http://www.w3schools.com/tags/tag_abbr.asphttp://www.w3schools.com/tags/tag_acronym.asphttp://www.w3schools.com/tags/tag_acronym.asphttp://www.w3schools.com/tags/tag_address.asphttp://www.w3schools.com/tags/tag_bdo.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_phrase_elements.asphttp://www.w3schools.com/tags/tag_bdo.asphttp://www.w3schools.com/tags/tag_address.asphttp://www.w3schools.com/tags/tag_acronym.asphttp://www.w3schools.com/tags/tag_abbr.asp


18/29

The WHO was founded in1948.

Can I get this ASAP?

Abbreviation/Accronym


19/29

063 Manglicmot Street

Bulakanon, Makilala, Cotabato

Address


20/29

Here is some Hebrew text

Bi-directional Override


21/29

This is a

heading

This is aparagraph.

HTML Style BackgroundColor

The -ackground colorproperty defines the background color for:an element

HTML St l F t C l


22/29

A heading

Aparagraph.

HTML Style Font, Color,SizeThe - ,ont family ,olor and -ont size properties defines

, , :the font color and size of the text in an element

HTML St le Te t


23/29

This is aheading

The heading above is aligned to the centerof this page.

HTML Style TextAlignment-The text align property specifies the horizontal alignment of text

:in an element


24/29

A hyperlink (or link) is a word, group ofwords, or image that you can click on to

jump to a new document or a new sectionwithin the current document.

Links are specified in HTML using the tag.

The tag can be used in two ways:

To create a link to another document, byusing the href attribute

To create a bookmark inside a document, byusing the name attribute

HTML Hyperlinks


25/29

< >html

< >body

< >p

< a

=" :// . . /"> < / >h re f h ttp w w w g o og le co m G o og le a

T h is is a lin k to a w e b site o n th e W o rld W id e. W eb

< / >p

< / >body< / >html


26/29

In HTML, images are defined with the tag.

Src stands for "source". The value ofthe src attribute is the URL of theimage you want to display.

The required alt attribute specifies analternate text for an image, if theimage cannot be displayed.

HTML Images


27/29

The height and width attributesare used to specify the heightand width of an image.

Height and Width


28/29

An image:

Inserting an Image


29/29

An image:

Inserting image with Heightand width

Documents

Website Making