Basics in HTML Writing
Introduction
HTML, or HyperText Markup Language, is the fundamental language used to create web pages.
- It is a markup language, which means that it uses tags to describe the structure of a web page.
NOTE: Every HTML document starts with a document type declaration: <!DOCTYPE html>. This declaration sets the document type and ensures proper rendering of the page.
HTML Elements
HTML elements are the building blocks of web pages. Each element is defined by a start tag, content and an end tag.
- <tagname> ...Content... </tagname>
Here are some essential HTML elements to structure your web pages.
- Headings
- Use <h1> to <h6> tags for defining headings, with <h1> representing the most important heading.
- Paragraphs
- Create paragraphs of text using the <p> element.
- Lists
- Build lists of items using <ul> (unordered list), <ol> (ordered list), <dl> (definition list) elements.
- Each list items is denoted by the <li> tag.
- Styles
- Enhance the appearance of elements by adding styles using the style attribute. You can specify properties like colour, font-family, font, size, text-align and more.
- Example: <p style="color: red; font-family: verdana; font-size: 60px; text-align: center;">This is a red paragraph.</p>
- Text Formatting
- <b> - Bold text
- <strong> - Important text, typically displayed in bold.
- <i> - Italic text
- <em> - Emphasized text, typicallyed displayed in italic.
- <u> - Underlined text
- <del> - Strike a line through deleted text.
- <mark> - Highlighted text
- <sub> - Subscript text
- <sup> - Supercript text
- Images
- Add images to your web pages using the <img> tag. Specify the source file (src), alternative text (alt) and dimensions (width and height in pixels).
- Example: <img src="/images/rxnote.jpg" alt="RxNote" width="500" height="600">
- Tables
- Create tabular data using the <table> element.
- Rows are defined with <tr> tags, cells with <td> tags and table headers with <th> tags.
- Links
- Insert hyperlinks using the <a> tag. The destination URL is specified in the href attribute.
- Example: <a href="https://mypharmacistnote.blogspot.com/">link text</a>
NOTE: Never skip the end tag, except for certain elements such as <br> (defines a line break) and <hr> (defines a horizontal line on a web page).
HTML Symbols
HTML symbols allow you to represent characters that are not present on a standard keyboard. Here are some commonly used symbols.
Mathematical Symbols
- < - <
- ≤ - ≤
- > - >
- ≥ - ≥
- ≡ - ≡
- ° - Degree (˚)
- α - Alpha (α)
- β - Beta (β)
- γ - Gamma (γ)
- δ - Delta (δ)
- μ - Micro (µ)
- µ - Micro (µ)
- π - π
- ² - ²
- ³ - ³
- 1⁄2 - ½
- ½ - ½
- 1⁄4 - ¼
Punctuation Symbols
- - Non-breaking space
- & - Ampersand (&)
- ‘ - Left single quotation mark (‘)
- ’ - Right single quotation mark (’)
- “ - Left double quotation mark (“)
- ” - Right double quotation mark (”)
- · - Middle dot (·)
- © - Copyright symbol (©)
- ® - Registered Trademark symbol (®)
- ™ - Trademark symbol (™)
Example of A Web Page
HTML VIEW
<!DOCTYPE html><html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>My First Web Page</h1>
<p>This is my first web page: <a href="https://mypharmacistnote.blogspot.com/">Rx Note</a>.</p>
<ul>
<tr>
<th>Row 1, Column 1</th>
<th>Row 1, Column 2</th>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
<tr>
<td>Row 3, Column 1</td>
<td>Row 3, Column 2</td>
</tr>
</table>
</body>
</html>
COMPOSE VIEW
My First Web Page
This is my first web page: Rx Note.
Starting a list:
- This is a list.
- This is another item in the list.
| Row 1, Column 1 | Row 1, Column 2 |
|---|---|
| Row 2, Column 1 | Row 2, Column 2 |
| Row 3, Column 1 | Row 3, Column 2 |
Summary
While learning HTML scripting is not necessary for writing a blog, having a basic understanding can be helpful.
Comments
Post a Comment