Posts tagged "h1"

How to Scripting HTML

What is HTML?

HTML is a set of tags that has several rules when using them in making what they call a hypertext document. HTML stands for Hypertext Markup Language, it is the greatest scripting language in for web pages. HTML provides a means of creating structured documents by indicating structural semantics for text such as paragraphs, list, heading etc as well as for hyperlinks, quotes, images or other items.

HTML Tags

The HTML markup tags. They are often called HTML tags. HTML tag is a work that is surrounded by <html> angle brackets. HTML tag almost come in pairs except for some keyword that comes opening and closing within the same tag for example below.

< strong > I am a bold text < / strong >

HTML tags are usually paired the first tag is the <b> and the second tag or the closing tag is the </b> take note of the font slash / the closing tag must always have the front slash right before the keyword.

HTML Document or The Web Pages

HTML documents are described as web pages, they contain HTML tags and plain text. Most often they are called Website pages. HTML document can be viewed by a program or software called web browsers e.g Firefox by Mozilla, Internet Explorer by Microsoft, Google Chrome by Google and many more.

< html >
< >

< h1 > This is the Heading < / h1 >

< p > While I am the paragraph. < / p >

< / >
< / html >

The HTML code above <html> and </html> is the main code for the whole HTML document, it open the whole HTML code at <html> and it will end at </html> . The body tag which is <body> and </body> is the part of HTML that is visible in the web browsers. The <h1> and </h1> tags are the Heading tags, they are mostly used in title of an article or page. The <p> and </p> are the paragraph tags, everything between those <p> codes are displayed as a paragraph style.

How can you create an HTML document?

HTML document can be created or edited using many kind of editors like Dreamweaver or Visual Studio, Notepad++ for better code highlighting so you can the tags in different colors and easily spot the start and end of each of the tags you used. But for starters you can use Windows Notepad or

Create your first Test Page

Copy the copy below and named it whatever you want BUT you must use .htm or .html as file extension of that document. To create a .html file in Notepad Click ‘File’ then ‘Save’ and make sure that the ‘Save as type’ is valued ‘All files (*.*)’ and then you can go ahead and name your files for example myhtml.html and hit save.

< html >

< >

< h1 > Hello World! < / h1 >

< p > This is my first created HTML document. < / p >

< / >

< / html

After you have copied the code above and save it in a file name of your choice with a .html or .htm extension, locate the file and double click on it and you will see you first created Web Page opened in your browser.

Creating HTML heading

We used a heading tag in your first created Web page so you are now familiar with heading tags, there are 6 kinds of heading tags <h1> to <h6> greater the number the smaller the size of text. Example below

Code:

< html >

< >

< h1 > I am the H1 < / h1 >

< h2 > I am the H2 < / h2 >

< h3 > I am the H3 < / h3 >

< h4 > I am the H4 < / h4 >

< h5 > I am the H5 < / h5 >

< h6 > I am the H6 < / h6 >

< / >

< / html >

Result:

I am the H1

I am the H2

I am the H3

I am the H4

I am the H5
I am the H6

though h4 to h6 tags looks kinda the same by they are different.

Creating HTML Paragraph

You are also familiar now with this <p> tag as we have example this in your first Web Page.

< p > I am simply a Paragraph. < / p >

Creating HTML Link

What we have not discuss is the HTML link. The HTML Link is created using the <a> and </a> tag, if you are wondering what ‘a’ stands for its anchor or anchor text.

Code:

< a href = ”http: // www.google.com”> My Link to Google.com website < / a >

Result:
My Link to Google.com website

Creating HTML Images

One of the cool stuff that HTML can do is it can embed images on to your web document. HTML images are defined with the <img> tag.

Example Code:

< img src = ”howtoscripting.jpg” width = 104 height = 142 / >

Result:

Image from <img> tag

Image from <img> tag

The HTML Elements

The individual components of an HTML document are what we call the HTML Elements, were each of the elements can have their own attribute specified. The HTML elements represents semantics, or meaning e.g title element represents the title of the web page or the document.

The Complete List of HTML 4 Elements

Name Description
A anchor
ABBR abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM
ADDRESS information on author
APPLET Java applet
AREA client-side image map area
B bold text style
BASE document base URI
BASEFONT base font size
BDO I18N BiDi over-ride
BIG large text style
BLOCKQUOTE long quotation
BODY document body
BR forced line break
BUTTON push button
CAPTION table caption
CENTER shorthand for DIV align=center
CITE citation
CODE computer code fragment
COL table column
COLGROUP table column group
DD definition description
DEL deleted text
DFN instance definition
DIR directory list
DIV generic language/style container
DL definition list
DT definition term
EM emphasis
FIELDSET form control group
FONT local change to font
FORM interactive form
FRAME subwindow
FRAMESET window subdivision
H1 heading
H2 heading
H3 heading
H4 heading
H5 heading
H6 heading
HEAD document head
HR horizontal rule
HTML document root element
I italic text style
IFRAME inline subwindow
IMG Embedded image
INPUT form control
INS inserted text
ISINDEX single line prompt
KBD text to be entered by the user
LABEL form field label text
LEGEND fieldset legend
LI list item
LINK a media-independent link
MAP client-side image map
MENU menu list
META generic metainformation
NOFRAMES alternate content container for non frame-based rendering
NOSCRIPT alternate content container for non script-based rendering
OBJECT generic embedded object
OL ordered list
OPTGROUP option group
OPTION selectable choice
P paragraph
PARAM named property value
PRE preformatted text
Q short inline quotation
S strike-through text style
SAMP sample program output, scripts, etc.
SCRIPT script statements
SELECT option selector
SMALL small text style
SPAN generic language/style container
STRIKE strike-through text
STRONG strong emphasis
STYLE style info
SUB subscript
SUP superscript
TABLE
TBODY table body
TD table data cell
TEXTAREA multi-line text field
TFOOT table footer
TH table header cell
THEAD table header
TITLE document title
TR table row
TT teletype or monospaced text style
U underlined text style
UL unordered list
VAR instance of a variable or program argument

HTML Element Syntax

As I mentioned above almost all the elements of the HTML have starting and ending tag. For example <html> and </html> so the content of HTML elements is found between those tags. But there are some elements that do not have content e.g <br /> the starting and the closing tag of this element are combined into one tag. Most HTML elements can have its own attributes.

P.S

More on this topic later as I will be updating this page until all the HTML basics are discussed.

Be the first to comment - What do you think?
Posted by Mark Anthony Sabandal - March 8, 2011 at 5:19 pm

Categories: HTML Tags: , , , , , , , , , , , , , , , , , , ,