HTML: PART ONE
-
Upload
roanna-barrett -
Category
Documents
-
view
27 -
download
0
description
Transcript of HTML: PART ONE
![Page 1: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/1.jpg)
HTML: PART ONE
![Page 2: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/2.jpg)
Creating an HTML Document It is a good idea to plan out a web page
before you start coding Draw a planning sketch or create a
sample document in word Preparatory work can weed out errors or
point to potential problems
![Page 3: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/3.jpg)
Creating an HTML Document In planning, identify elementsAn element is a distinct object in the document, like a paragraph ,a heading, or a page’s title Formatting features such as boldfaced
font, and italicized text may be used Watch out for the use of underline
![Page 4: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/4.jpg)
White Space and HTML HTML file documents are composed of
text characters and white space. White space is the blank space, tabs,
and line breaks with the file HTML treats each occurrence of white
space as a single blank space You can use white space to make your
document more readable
![Page 5: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/5.jpg)
Marking Elements with Tags The core building block of HTML is the
tag, which marks each element in a document
Properties are additional information that control how the tag is used
A two-sided tag is a tag that contains some document content
<TAGE NAME PROPERTIES> Text </TAG>
![Page 6: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/6.jpg)
HTML Syntax Tags usually come in pairs and are enclosed in
left and right angle bracketsOpening tag < >Closing tag </> (turns off the feature) Container Tags- tags that need to be turned on
and off and requires <>text</> Non-container Tags- (empty tag) requires only
<>, they do not need to be turned off HTML Tags are not case sensitive JUST BE CONSISTENT
![Page 7: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/7.jpg)
General HTML Formats <TAG attributes> <TAG> text </TAG> <TAG attributes> text </TAG>
![Page 8: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/8.jpg)
Creating an HTML File <HTML> Identifies the file as HTML <HEAD> Contains info about the web
page <TITLE> Favorite Quotes </TITLE> </HEAD> <BODY> (Page Content) </BODY> </HTML>
![Page 9: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/9.jpg)
Comments To add comments that are not seen in
the browser by the audience<!- - Desired Information - - > Comments allow you to organize your
HTML document so you can find items quickly or explain a section.
![Page 10: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/10.jpg)
Headers HTML supports six levels of headers <H1>
to <H6> Headers always appear on their own line and
are separated by a blank line above and below
To center a Heading:<H1 ALIGN = “CENTER”>Text</H1> Use the Headings in order within a
document. Do not use <H5> heading before <H1>
![Page 11: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/11.jpg)
Paragraph Formatting <P> Marks the end of a paragraph –
inserts a return and a blank line <BR> Identifies a line break – no blank line You do not have to close the <P> or the
<BR> <BLOCKQUOTE> Text is indented and has
a paragraph line break </BLOCKQUOTE> <DIV> Identifies a generic block-level
element (Such as a paragraph)
![Page 12: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/12.jpg)
Horizontal Rule <HR> ALIGN property can be se to left, center,
right – default is center WIDTH property tells what percentage of the
width of the page the line should occupy i.e. WIDTH=“50%” means the line is 50% of the page
SIZE= “ “ specifies the line thickness in pixels
There are 72 pixels in an inch
![Page 13: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/13.jpg)
Horizontal Rule COLOR = “RGB VALUE” (Red, Green,
Blue) Hexidecimal Values = numeric values
between RGB Six number or lettersXX(red)XX(green)XX(blue)Example: FFFFFF(white) Go to http://html-color-codes.com/
![Page 14: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/14.jpg)
Body Tags To change the background color:<BODY BGCOLOR = “RRGGBB”> To change the text color:<BODY TEXT= “RRGGBB”> To use an image as background: <BODY
BACKGROUND=“graphicsfilename”>
![Page 15: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/15.jpg)
Font Face Over-ride the browser’s choice of font:<FONT FACE = “Arial, Helvetica, Sans Serif”> Use minimal different font types to
increase readability You can also add the COLOR property to
change the font color<FONT COLOR = “ffffff”>
![Page 16: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/16.jpg)
Font Size You can use regular point size (for
example: 10, 12, 14)<FONT SIZE = “12px”> hi there </FONT>
![Page 17: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/17.jpg)
Tags Character Tags<B> Text will be bold </B><I> Text will be italicized </I><U> Text will be underlined </U>
DIV ALIGN attribute Tag (aligns entire paragraph)<DIV ALIGN = “alignment”>text</DIV>Alignment = “left”, “center”, or “right”
Default is “left”
![Page 18: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/18.jpg)
Multiple Tag Order Tag order to start is closed in reverse
order<DIV ALIGN= “CENTER”><B><I>Text(At this point, all tags are open)</I></B></DIV>(At this point, all tags are closed)
![Page 19: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/19.jpg)
Inserting an Image To insert an image on your page: <IMG SRC=“graphics filename”> Make sure you include the entire URL if
your picture is not saved in the same directory as your web page
You can use the ALIGN property to align the image on the page
<IMG SRC=“graphics filename” ALIGN=“RIGHT”>
![Page 20: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/20.jpg)
Lists Ordered List = Numeric Order<OL> Begin Ordered List<LI> Item One<LI> Item Two<LI> Item Three</OL> Close Ordered List
![Page 21: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/21.jpg)
Lists <OL TYPE=“ “> Ordered List Types: 1=Numbers (this is default) I= Uppercase Roman Numerals i= Lowercase Roman Numerals A=Uppercase Letters a= Lowercase letters
![Page 22: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/22.jpg)
Lists Unordered Lists List with no particular order Browsers will add a bullet before each
item <UL> Open unordered List <LI> Item One <LI> Item Two </UL> Close Unordered List
![Page 23: HTML: PART ONE](https://reader038.fdocuments.in/reader038/viewer/2022110211/568130d6550346895d96eadf/html5/thumbnails/23.jpg)
Summary: Tips for Good HTML Code Use line breaks and indented text to make
your HTML file easier to read Insert comments into your HTML fine to
document your work Be consistent in entering in your tags and
attribute names (all lowercase) Place all attribute values in quotes Close all two-sided tags Test your Web page on all relevant browsers