Before we start, I would like to introduce some useful resources for web design:
And done, now let's get started with our topic today; the basic HTML!
HTML, or HyperText Markup Language, is a markup language (obviously) for creating web pages. Documents written in HTML format are in plain text format, and can also be called HTML documents. They contain information content with markup tags to instruct a browser how to display the content in web pages.
You can use any text editor to write an HTML document, but the file should have either .html or .htm extension.
examples of WYSIWYG1 HTML editor:
examples of other popular (but not WYSIWYG) text editor:
- Visual Studio Code
- HTML tags are enclosed in angle brackets; <>. Tags usually come in pairs (an opening tag, and a closing tag) which is the same tag-name preceded by a slash. E.g.
- not all tags need closing, though. For example, <p> paragraph: implies closing of previous paragraph tag (although you can add a closing tag as well). <br> line break: marks a location, not a region.
- HTML tags are not case sensitive. <b> means the same as <B>
- Unknown tags are ignored.
- Opening and closing tags define regions affected by the tags. These regions can be nested, but not overlapped. click the picture for the source site <3
- Headings are defined with <h1> to <h6> tags. While <h1> defines the largest heading, and <h6> as the smallest.
- Browsers automatically add an extra blank line before and after a heading.
- As I've mentioned above, <p> defines as new paragraphs.
- Browsers automatically add an extra blank line before and after a paragraph.
- A browser will go to the next line only when it reaches the end of the current line. So typing..
Hello, I want a new line.
in your text editor will display only one line of text in the browser..
- The <br> tag forces a line break wherever you place it.
<b>Boldfaced text</b><br> <i>Italicized text</i><br> <u>Underlined text</u><br> <del>Strikethrough text</del>
- Attributes provide additional information to your page; e.g. 'bgcolor' attribute in <body> tag is used to change the background colour of the page.
- Attributes usually come in as name="value".
- Or Hyperlinks in an HTML connect one document to another.
- Hyperlinks allow you to navigate other HTML documents on your own or others' servers.
- To create a hyperlink, you enclose the linked text with opening and closing anchor tags <a></a>.
- Within the start anchor tag <a>, set HREF attribute to point to the URL of the target page. The syntax of creating an achor:
<a href="url">Text to be displayed</a> or <a href="url">Image to be displayed</a>
- There are to types of paths that we can link to:
- Absolute path: used when linking to another domain's web pages.
- Relative path: used when linking to web pages within your domain.
Absolute path: <a href="http://www.google.com/intl/en/about.html">About Google</a> Relative path: <a href="filename.html">Text/Image to be displayed</a>
<body> <p align="left">Left alignment text</p> <p align="center">Center alignment text</p> <p align="right">Right alignment text</p> </body>
- There are 3 types of bitmapped or painted image types that all browsers recognize by default:
- GIF (Graphic Interchange Format)
- JPEG (Joint Photographic Experts Group)
- PNG (Protable Network Graphics)
- The image tag <img src="URL"> is used to add an image to a web page. The attribute src specifies the URL or path of the image file.
- We can add width and height attributes to resize the image.
- And align attribute to set the image alignment.
<img src="http://www.mahidol.ac.th/images/logo.gif" width="45" height="45" align="right">
- There are 2 types of lists; ordered lists and unordered lists. E.g.
Ordered list: <ol> <li>Number one</li> <li>Number two</li> <li>Number three</li> <ol> unordered list: <ul> <li>Hey</li> <li>There</li> </ul> <ul type="circle"> <li>What's</li> <li>up!</li> </ul> <ul type="square"> <li>Yo</li> <li>baby~</li> </ul>
- If you want to manipulate fonts and their sizes in HTML, you can use <font> tag, with size and face attributes.
- The size attribute has values vary from 1 to 7 (smallest->largest).
- The default font size is 3.
- The face attribute contains the actual name of the typeface you wish to use.
- You can change colour using color attribute. Either you type
<font color="red">or you can type colour in RGB hexadecimal value codes
- Some characters have a special meaning in HTML, e.g. the < sign that defines the start of an HTML tag. If we want the browser to actually display them, we ust use character entities.
- Character entity has 3 parts
- An ampersand &
- An entity name or a
# + entity number
- A semicolon ;
e.g. < can be written as
- Entitites are case sensitive.
- It is used to insert a comment in the HTML source code, and will be ignored by the browser
<!-- This is a comment -->
- The <hr> tag insers a horizontal rule. E.g.
This is some text. <hr> This is another text.
This is some text.
This is another text.
- Tables are defined with the <table> ... </table> tags.
- A table is divided into rows, and each row is divided into columns (or cells).
- Rows are determined by <tr></tr>, and columns by <td></td>.
- Data has to ONLY be put between <td></td> tags.
- Heading Cells are defined with the <th></th> tags, and they act simarly as <td></td> tags, except the text is in bold.
- There is also an align attribute to set the alignment of the content.
- We use colspan and rowspan to span across more than one column and row respectively.
- You can also apply different colours to the table using bgcolor attribute.
<table border="1"> <tr> <th colspan="3" bgcolor="blue">Student Grade Report</th> </tr> <tr> <th>ID</th> <th>Name</th> <th>Grade</th> </tr> <tr> <td>478812</td> <td>John Smith</td> <td align="center">A</td> </tr> <tr> <td>479821</td> <td>Mary Jane</td> <td align="right">B</td> </tr> </table>
for other basic HTML tags, click here!
WYSIWYG stands for What You See Is What You Get. ↩