HTML
The <a> tag defines a hyperlink.
The href attribute specifies the URL of the page the link goes to.
The <img> tag is used to embed an image in an HTML page.
The src attribute specifies the path to the image to be displayed.
There are two ways to specify the URL in the src attribute:
1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="[Link]
Notes: External images might be under copyright. If you do not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot control external images; it
can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not
include the domain name. If the URL begins without a slash, it will be relative to the current page.
Example: src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain.
Example: src="/images/img_girl.jpg".
Tip: It is almost always best to use relative URLs. They will not break if you change
domain.
The style attribute is used to add styles to an element, such as color, font, size, and more.
eg. <p style="color:red;">This is a red paragraph.</p>
The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the
element.
We Suggest: Always Use Lowercase Attributes
The HTML standard does not require lowercase attribute names.
The title attribute (and all other attributes) can be written with uppercase or lowercase like
title or TITLE.
However, W3C recommends lowercase attributes in HTML, and demands lowercase
attributes for stricter document types like XHTML.
We Suggest: Always Quote Attribute Values
The HTML standard does not require quotes around attribute values.
However, W3C recommends quotes in HTML, and demands quotes for stricter document
types like XHTML.
HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a
horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves
both spaces and line breaks
Text Color
The CSS color property defines the text color for an HTML element:
The CSS font-family property defines the font to be used for an HTML element
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
The HTML <blockquote> and <cite> elements are both used when you want to include quotations
and indicate their source, but they have different purposes.
The <blockquote> element is used to display a long quotation taken from another source.
<blockquote>This is a long quotation. </blockquote>
How It Works
It tells the browser that the enclosed text is a quotation.
Browsers usually display it with indentation.
Search engines and screen readers understand that this text is quoted from another source.
Example
<p>Albert Einstein once said:</p><blockquote>Life is like riding a bicycle. To keep your balance,
you must keep moving. </blockquote>
The cite Attribute in <blockquote>
The <blockquote> tag has an optional cite attribute.
This attribute stores the URL of the original source of the quotation.
Syntax
<blockquote cite="[Link]
Quoted text...
</blockquote>
<blockquote cite="[Link]
Life is like riding a bicycle.
To keep your balance, you must keep moving.
</blockquote>
You can also hide more than one line. Everything between the <!-- and the --> will be hidden from
the display.
Comments are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors.
Tip: The word cascading means that a style applied to a parent element will also apply to all
children elements within the parent. So, if you set the color of the body text to "blue", all headings,
paragraphs, and other text elements within the body will also get the same color (unless you specify
something else)!
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.
Tip: With an external style sheet, you can change the look of an entire web site, by changing one
file!
Use the HTML style attribute for inline styling
Use the HTML <style> element to define internal CSS
Use the HTML <link> element to refer to an external CSS file
Use the HTML <head> element to store <style> and <link> elements
Use the CSS color property for text colors
Use the CSS font-family property for text fonts
Use the CSS font-size property for text sizes
Use the CSS border property for borders
Use the CSS padding property for space inside the border
Use the CSS margin property for space outside the border
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link 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.
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's email
program
Here, an unvisited link will be green with no underline. A visited link will be pink with no
underline.
An active link will be yellow and underlined. In addition, when mousing over a link (a:hover) it
will become red and underlined:
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 down or up to the location with the bookmark.
Example
First, use the id attribute to create a bookmark:
<h2 id="C4">Chapter 4</h2>
Use the id attribute (id="value") to define bookmarks in a page
Use the href attribute (href="#value") to link to the bookmark
Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes or the CSS width and height properties to define
the size of the image
Use the CSS float property to let the image float to the left or to the right
Note: Loading large images takes time, and can slow down your web page. Use images carefully.
To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property
The HTML <picture> Element
The HTML <picture> element gives web developers more flexibility in specifying image resources.
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.