example: <img> tag
code;
<img class="examples"src="../pics/3.jpg" alt="holiday picture" width="260" height="245"/>
revision:
CSS stands for "Cascading Style Sheets" and it can control the layout of multiple web pages all at once.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!
CSS can be added to HTML documents in 3 ways.
1/ Inline - by using the style attribute inside HTML elements.
2/ Internal - by using a "style" element in the head section.
3/ External - by using a "link" element to link to an external CSS file.
The most common way to add CSS is to keep the styles in external CSS files. However, in this tutorial we will use inline and internal styles, because this is easier to demonstrate.
Inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.
A red paragraph.
code:
<p class="examples" style="color:red;">A red paragraph. </p>
Internal CSS is used to define a style for a single HTML page and is defined in the "head" section of an HTML page, within a "style" element.
External CSS is used to define the style for many HTML pages. To use an external style sheet, add a link to it in the "head" section of each HTML page. The external style sheet can be written in any text editor. The file must not contain any HTML code, and must be saved with a .css extension. External style sheets can be referenced with a full URL or with a path relative to the current web page.
CSS colors, fonts and sizes: the CSS color property defines the text color to be used, the CSS font-family property defines the font to be used, the CSS font-size property defines the text size to be used.
CSS border: the CSS border property defines a border around an HTML element. A border can be defined for nearly all HTML elements.
CSS margin: the CSS margin property defines a margin (space) outside the border.
When you move the mouse over a link, the mouse arrow will turn into a little hand. A link does not have to be text and can be an image or any other HTML element!
The HTML <a> tag defines a hyperlink. It has the following syntax: <a href="url">link text </a>. The most important attribute of the <a> element is the "href" attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address.
code:
<a class="examples" href="https://lwitters.com" target="_blank">Visit my website </a>
By default, links will appear as follows in all browsers: an unvisited link is underlined and blue, a visited link is underlined and purple, an active link is underlined and red
HTML links - the target attribute specifies where to open the linked document. By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute can have one of the following values:
_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.
Use an image as a link : put the <img> tag inside the <a> tag.
Link to an email address : use "mailto:" inside the href attribute to create a link that opens the user's email program (to let them send a new email)
code:
<a class="examples" href="mailto:witters@sh163.net">Send email </a>
Button as a link: add some JavaScript code. JavaScript allows you to specify what happens at certain events, such as a click of a button.
Link titles: the title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
code:
<a class="examples" href="https://lwitters.com" title="my website">Visit this site </a>
Create a bookmark in HTML: bookmarks can be useful if a web page is very long. To create a bookmark - first create the bookmark, then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark. Use the id attribute (id="value") to define bookmarks in a page. Use the href attribute (href="#value") to link to the bookmark.
Images are not technically inserted into a web page, but are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, contains attributes only, and does not have a closing tag.
The tag has two required attributes : "src" - specifies the path to the image - and "alt" - specifies an alternate text for the image. Syntax: <img src="url" alt="alternate text;">
The src attribute specifies the path (URL) to the image. When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.
The 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. If a browser cannot find an image, it will display the value of the alt attribute.
code;
<img class="examples"src="../pics/3.jpg" alt="holiday picture" width="260" height="245"/>
Image size - width and height: you can use the style attribute to specify the width and height of an image. Alternatively, you can use the width and height attributes, which always define the width and height of the image in pixels.
Images in another folder: if you have your images in a sub-folder, you must include the folder name in the src attribute. Some web sites points to an external image on another server. To point to an image on another server, you must specify an absolute (full) URL in the src attribute.
Image floating: use the CSS float property to let the image float to the right or to the left of a text.
The areas are defined with one or more <area> tags.
Click on the computer, the phone, or the cup of coffee to go to a new page.
code:
<img class="examples" src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="https://en.wikipedia.org/wiki/Computer">
<area shape="rect" coords="320,172,370,250" alt="Phone" href="https://en.wikipedia.org/wiki/Telephone">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="https://en.wikipedia.org/wiki/Coffee">
</map>
The idea behind an image map is that you should be able to perform different actions depending on where in the image you click. To create an image map you need an image, and some HTML code that describes the clickable areas.
The image is inserted using the <img>tag. The only difference from other images is that you must add a "usemap" attribute. The usemap value starts with a hash tag - # - followed by the name of the image map, and is used to create a relationship between the image and the image map.
Create image map: add a <map> element, which is used to create an image map, and is linked to the image by using the required "name" attribute, which must have the same value as the <img>'s "usemap" attribute .
Add the clickable areas, which are defined using an <area> element. You must define the shape of the clickable area by using one of these values: a/ rect - defines a rectangular region, b/ circle - defines a circular region, c/ poly - defines a polygonal region, d/ default - defines the entire region. You must also define some coordinates to be able to place the clickable area onto the image.
Shape="rect": the coordinates for shape="rect" come in pairs, one for the x-axis and one for the y-axis. So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels from the top. The coordinates 270,350 is located 270 pixels from the left margin and 350 pixels from the top.
Shape="circle": to add a circle area, first locate the coordinates of the center of the circle: 337,300. Then specify the radius of the circle: 44 pixels
Shape="poly": the shape="poly" contains several coordinate points, which creates a shape formed with straight lines (a polygon). This can be used to create any shape.
Image map and JavaScript: a clickable area can also trigger a JavaScript function. Add a click event to the <area> element to execute a JavaScript function.
To add a background image on an HTML element, use the HTML style attribute and the CSS background-image property.
code:
<div class="examples" style="background-image: url('2.jpg'); margin-left: 4vw; color:red;"> .
. . . </div>
You can also specify the background image in the "style" element, in the "head" section.
Background image on a page: if you want the entire page to have a background image, you must specify the background image on the <body> element.
Background repeat: if the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element. To avoid the background image from repeating itself, set the background-repeat property to "no-repeat".
Background cover: if you want the background image to cover the entire element, you can set the background-size property to "cover". Also, to make sure the entire element is always covered, set the background-attachment property to "fixed". This way, the background image will cover the entire element, with no stretching (the image will keep its original proportions).
Background stretch: if you want the background image to stretch to fit the entire element, you can set the background-size property to 100%.
The <picture> element contains one or more <source> elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device. Each <source> element has a media attribute that defines when the image is the most suitable.
<picture class="examples">
<source media="(min-width: 650px)" srcset="1.jpg">
<source media="(min-width: 465px)" srcset="2.jpg">
<img src="3.jpg" style="width:auto;">
</picture>
There are two main purposes for the <picture> element:
1. Bandwidth: if you have a small screen or device, it is not necessary to load a large image file. The browser will use the first <source> element with matching attribute values, and ignore any of the following elements.
2. Format support: some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.
Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the text in <th> elements are bold and centered. By default, the text in <td> elements are regular and left-aligned.
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
<tr>
<th>Firstname </th>
<th>Lastname </th>
<th>Age </th>
</tr>
<tr>
<td>Jill </td>
<td>Smith </td>
<td>50 </td>
</tr>
<tr>
<td>Eve </td>
<td>Jackson </td>
<td>94 </td>
</tr>
<tr>
<td>John </td>
<td>Doe </td>
<td>80 </td>
</tr>
</table>
Note: The <td> elements are the data containers of the table. They can contain all sorts of HTML elements: text, images, lists, other tables, etc.
To add a border to a table, use the CSS border property. Remember to define borders for both the table and the table cells.
To collaps borders into one border, add the CSS border-collapse property.
Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property.
Left-align headings：by default, table headings are bold and centered. To left-align the table headings, use the CSS text-align property.
Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property. Note: if the table has collapsed borders, border-spacing has no effect.
To make a cell that spans more than one column, use the colspan attribute.
To make a cell that spans more than one row, use the rowspan attribute.
To add a caption to a table, use the <caption> tag, which must be inserted immediately after the <table> tag.
To define a special style for one particular table add an id attribute to the table.
Unordered HTML list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default.
An unordered HTML list
<p class="examples">An unordered HTML list</p>
<ul class="examples">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
</ul>
Ordered HTML list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.
An ordered HTML list
<p class="examples">An ordered HTML list</p>
<ol class="examples">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
</ol>
a HTML description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.
A Description List
<p class="examples">A Description List</p>
<dl class="examples">
<dt>Coffee </dt>
<dd>- black hot drink </dd>
<dt>Milk </dt>
<dd>- white cold drink </dd>
</dl>
Unordered HTML list - choose list item marker：the CSS list-style-type property is used to define the style of the list item marker. It can have one of the following values:
a/ disc - sets the list item marker to a bullet (default),
b/ circle - sets the list item marker to a circle,
c/ square - sets the list item marker to a square,
d/ none - the list items will not be marked.
Nested HTML lists：lists can be nested (list inside list). Note: a list item ( <li >) can contain a new list, and other HTML elements, like images and links, etc.
Horizontal list with CSS：HTML lists can be styled in many different ways with CSS. One popular way is to style a list horizontally, to create a navigation menu.
Ordered HTML list - the type attribute：the type attribute of the <ol> tag defines the type of the list item marker:
a/ type="1" - the list items will be numbered with numbers (default),
b/ type="A" - the list items will be numbered with uppercase letters,
c/ type="a" - the list items will be numbered with lowercase letters,
d/ type="I" - the list items will be numbered with uppercase roman numbers,
e/ type="i" - the list items will be numbered with lowercase roman numbers
Control list counting：by default, an ordered list will start counting from 1. If you want to start counting from a specified number, you can use the "start" attribute.
<ol class="examples"start="50">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
</ol>
<ol class="examples"type="I" start="50">
<li>Coffee </li>
<li>Tea </li>
<li>Milk </li>
</ol>