8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
1/29
Benedicto B. Balilo Jr.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
2/29
Developing HTML document
The HTML element identifies the document as an HTML or XHTML document.
The HEAD element contains information about thedocument, including its title, scripts used, style definitions,and document descriptions.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
3/29
The META element is used to embed document metainformation, contains information about the contents
of the document, such as keywords, authorinformation, and a description of the document. Theprimary advantage is to make it possible for searchengine robots and spiders to identify, catalog, and findthe information in your document.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
4/29
Other CHILD elements of the HEAD element
script instructs the browser that the enclosed content is part of ascripting language such as JavaScript (JScript)
style contains internal cascading style sheets (css) information
link defines a link. This element functions somewhat like the anchor
(a) element.
base defines a documents base Uniform Resource Location (URL) usingthe href attribute.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
5/29
The BODY element encloses all the elements, attributes, andinformation that you want a users browser to display.
Sample Web Development
All the elements, attributes, and information in the document bodygo here
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
6/29
Applying BASIC Elements
As you create the content, keep in mind that its exact appearance will vary frombrowser to browser.
Deprecated elements are those that may be phased out of the next version ofHTML. These elements have been deprecated in HTML 40 and XHTML1.
font local change to font. Deprecated in favor of CSScenter shorthand for div align=center s or strike strikethrough text. Deprecated in favor o f CSSu underline textapplet java applet. Deprecated in favor of the object element
basefont base font size. Deprecated in favor of cssdir directory list. Deprecated in favor of unordered lists (the ul element)menu menu list. Deprecated in favor of unordered lists (t he ul element)
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
7/29
Creating paragraph
One of the most common elements youll use is the paragraphelement,p, which is appropriate for regular body text.
A whole paragraph goes right here.
you can use the align attribute with the paragraph element, which has
values of left, center, right, and justify.
A whole paragraph goes right here.
Other paragraph-formatting elementsaddress used for address and contact informationblockquote used for formatting a quotationpre effective for formatting program code or similar information
(short for preformatted)
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
8/29
Creating Headings
In HTML you can use up to six levels of headings, h1 is the largest of theheadings and h6 is the smallest.
First Level Heading> Second Level Heading
By default, all browsers align headings to the left. However, most browserssupport the align attribute.
First Level Heading> Second Level Heading>
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
9/29
Creating Lists
Lists are a great way to provide information in a structured, easy-to-readformat. They help your users spot information easily, and they drawattention to important information.
Lists come into two varieties: numbered (called ordered lists) and bulleted(callled unordered lists)
Element Effectol Specifies that the information appear as an ordered
(numbered list)
ul Specifies that the information appear as an unordered
list (bulleted list)li Specifies a line item in either an ordered or an unordered
list.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
10/29
bulleted list
aboutprogramadmissioncontact
numbered listaboutprogramadmissioncontact
Numbered liststype=A specifies the number (orletter) with which the list should
start A, a, I, I or 1 (default)type=a type=I type=i type=1
Bulleted listsType=disc specifies the bulletshapeType=square Type=circle
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
11/29
This is the fifty-first item fifty second
This item was renumbered to be the seventh, using lowercaseroman numerals
renumbered eight
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
12/29
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
13/29
Element Effect
b Applies boldfacecite Indicates citations or referencecode Displays program code, similar to pre
element
em Applies emphasis, usually displayedas italicsi Applies italicsstrong Applies stronger emphasis, usually
displayed as bold text
sub Formats text as subscriptsup Formats text as superscripttt Applies fixed-width fontu Applies underline, deprecated
Common Character-Formatting Elements
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
14/29
Horizontal Rule
are lines that break up long sections of text, indicate a shift in information, or helpimprove the overall document design. The element has the followingattributes. align, noshade, size and width.
Specifying Line Breaks
sometimes you need to break a line in a specific place, but you dont want to start anew paragraph.
There was an XHTML writer
Who tried to make paragraphs wider
He found with a shock
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
15/29
Adding COLORS
To specify a background color for your documents, include the bgcolor attributein the opening body element.
setting the text colors
setting unvisited link colors
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
16/29
Specifying Fonts and Font Sizes
you can use the font element to specify font characteristics for your document,including color, size, and typeface. Attributes of element.
Element Effect
color Specifies font color in #RRGGBBface Specifies possible typefaces as a list, in order of
preference, separated by comma ex. Arial, Verdana size=n Specifies font size on a scale of 1 through 7
HTML Document
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
17/29
Adding GRAPHICS
The purpose of the image element (img) is to include graphic images in the bodyof your web page.
To make an image float to the left or right side and cause paragraphs to wraparound the image, use align=left or align=right
Use the height and width attribute to change the height and width of the image
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
18/29
Creating Hyperlinks
The element is used to create both external links and internal links (bothof which are otherwise known as hyperlinks).
External link http://www.yahoo.com http://www.unrealities.com/videos/sample.avi
Internal link
absolute URL
faculty portal
relative URL
faculty portal
http://www.yahoo.com/http://www.unrealities.com/videos/sample.avihttp://www.faculty.byethost17.com/history.htmlhttp://www.faculty.byethost17.com/history.htmlhttp://www.unrealities.com/videos/sample.avihttp://www.yahoo.com/8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
19/29
Jumping to a Named Anchor
you can link to a specific part of a document by adding its name to the URL aftera # character.
history
opens a file called history.html and then jumps down to the 142 section. Thesetypes of links will work only if the file has a section with a named anchor
element.
section will be displayed when history link clicked
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
20/29
PHRASE Elements
are used to mark up small sections of text. Theyre especially useful for readers who use a non-graphical browser, for search engines and indexers that refer to your HTML code to categorize sections of your document for their site outlines,and or other computer programs that need to interact with your web pages toextract data for other useful purposes.
Element Definition
acronym Indicate the presence of an abbreviation(WWW, FTP, etc)
citation Used to indicate that the enclosed text is acitation
code Used for examples of program code
keyboard Indicate text that the viewer should typesample Indicate sample output text from a computer
program var Marks up the variables used in computer
programs or the parts of a computer command
chosen by the user
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
21/29
Dividing a WINDOW with FRAMES
frames allow multiple HTML or XHTML documents to be presented as
independent windows within one main browser window. Frameset documentshave a different structure than normal HTML documents. A regular HTML or XHTML document has a head element and a body element, but a framesetdocument has a head element and a frameset element.
creating frames in column
creating frames in row
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
22/29
Dividing a WINDOW with FRAMES cont
creates web page using frames, arrangement of several frames.
attributes:cols creates a frame within a vertical column on the page. Its size can be
specified into three ways: (1) as a percentage cols=25%, (2) in pixels cols=175,and in relative size cols=*.
rows specifies a number of rows within a frame.frameborder = specifies the presence or the absence of a border around the
frames.framespacing - specifies an amount of space between frames in pixelsscrolling - specifies whether or not the user of a page with frames can or
cannot scroll down within each individual frame.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
23/29
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
24/29
topbar.html
left.html right.html
activities
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
25/29
CREATING FORM
primary tag to create a form. A form is a front-end user interface on a
web that is linked to a CGI script of other gateway program.
To include form into page, you should1. Ask the ISP what are their form limitations and requirements2. Find an appropriate CGI script or other gateway program.
http://www.worldwidemart.com/scripts http://cgi-resources.com
eg.
Text goes here .
http://www.worldwidemart.com/scriptshttp://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://cgi-resources.com/http://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scriptshttp://www.worldwidemart.com/scripts8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
26/29
Creating FORM cont
attributes
action specifies the URL where the form data is sent to be processed by theCGI script or gateway program
method specifies how information typed into form. value:GET information will be sent in a URL and the
sender will get a customized responsePOST information will be sent in the body of the
submission and the reader will get a short standardized response.target specifies how the response to a form request is displayed
values:BLANK the response info. Is loaded into a new blank windowPARENT the response info. Is loaded into the parent windowSELF the response info. Is loaded into the same window that the form
is inTOP the response info. Is loaded into the full window body.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
27/29
Creating FORM cont
specifies the type of form control to be inserted in a web page, text
boxes, buttons, checkboxes and more.
attributes:align used to wrap text around a form.
value: bottom, left, middle, right, and topchecked used to set a default checked or selected settingmaxlength specifies the maximum number of characters that can be typed
into a text box.name specifies the description of the text control that corresponds to the
gateway program that processes any info. Submitted via the form.size specifies the height and width of a text control in characters.src specifies a filename when image is specified s the TYPE value.
tabindex permits the user to move from control using the TAB key instead
of a mouse.
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
28/29
Creating FORM cont
type specifies the kind of form control to be displayed.
value:buttoncheckboxfile a file appears on the page as specified by the SRC attributehiddenimage - image appears as specified by SRCpasswordradioreset clears and resets all controlssubmit submit the informationtext - a blank, single-line text box
8/13/2019 Lesson 2 HTML Tags Web Designing HTML Tags
29/29
end of presentation 2.
Thank you
Top Related