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.
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.
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.
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:
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.
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:
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
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.
Categories: HTML Tags: angle brackets , body tag , bold text , code html , , h1 , html documents , html markup tags , html tags , hypertext document , internet explorer , lt , markup language , paragraph , paragraphs , scripting language , semantics , , , web browsers
