HTML Basics
Paragraphs, Text Formatting, Headings, Lines, Comments
Paragraph
-
Defined by <p> tag
-
<br/> used to break the line without starting a new paragraph
Text style:
<b> = bold
<i> = italic
<small> = small text
<sub> = Sucripted text
<sup> = Superscript text
<del> = deleted text (with a line crossing the middle of the text)
Headings
-
6 levels, from <h1> to <h6>
-
Search engine use headings to index page structure and content
Comments
-
Browser will ignore these when display
-
Where you put any content/design description, reminders, etc
Attributes
-
Attributes provide additional value to a tag and modify them
-
Appear in the format: name = “value” pair
Some common attributes are:
-
href attribute of <a> specifies the URL of the page the link goes to
-
src attribute of <img> specifies the path to the image to be displayed. The source can either be absolute, means that the image is from other sources than the website itself, or relative, means that the image is hosted within the website
-
width and height attributes of <img> provide size information for images. This can be px or percentage:
-
alt attribute of <img> provides an alternate text for an image
-
style attribute is used to add styles to an element, such as color, font, size, and more
Images
-
The <img> tag is used to insert an image.
-
Contains only attributes, and does not have a closing tag.
-
The image's URL (address) can be defined using the src attribute.
-
The image can be in the same folder, in another folder, or online
-
alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
-
The value of the alt attribute should describe the image:
-
Width and height attributes are used to define the image size
Links
-
In HTML, links are defined using the <a> tag. Use the href attribute to define the link's destination address:
The target attribute specifies where to open the linked document.
-
_self - Default. Opens the document in the same window/tab as it was clicked
-
_blank - Opens the document in a new window or tab
-
_parent - Opens the document in the parent frame
-
_top - Opens the document in the full body of the window
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
-
Absolute: full web address
-
Relative: a link to a page within the same website
Lists & Tables
An ordered list starts with the <ol> tag, and each list item is defined by the <li> tag. Item in this list will be automatically marked with numbers. Here is an example of an ordered list:
A unordered list starts with the <ul> tag, and each list item is defined by the <li> tag. Item in this list will be automatically marked with bulleted list. Here is an example of an ordered list:
Tables:
-
Tables are defined by using the <table> tag.
-
Tables are divided into table rows with the <tr> tag.
-
Table rows are divided into table columns (table data) with the <td> tag. This act as data containers within the table.
-
To add a caption to a table, use the <caption> tag
-
To make a cell span more than one column, use the colspan attribute:
-
To make a cell span more than one row, use the rowspan attribute:
-
We will not talk much about styling here, because you should really separate content from styling. We will cover styling in CSS
Inline and Block Elements
In HTML, most elements are defined as block level or inline elements.
-
Block level elements start from a new line.
For example: <h1>, <form>, <li>, <ol>, <ul>, <p>, <pre>, <table>, <div>, etc.
-
Inline elements are normally displayed without line breaks.
For example: <b>, <a>, <strong>, <img>, <input>, <em>, <span>, etc.
-
Inline elements cannot contain any block level elements.
Forms
F
HTML Colors
