Scribd
Upload
12 views8 pages

Computer Reviewer (2nd Quarter) (Modified)

The document provides an overview of various HTML elements and formatting options, including paragraphs, horizontal rules, line breaks, preformatted text, styles, links, and more. It explains elements like <p>, <hr>, <br>, <pre>, how to use inline styles to control colors, fonts and sizes, and link syntax using the <a> tag and href attribute. CSS is introduced as a way to format layout and various CSS properties are defined including color, font, size, border, and padding.

Uploaded by

Shawn Newton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
12 views8 pages

Computer Reviewer (2nd Quarter) (Modified)

The document provides an overview of various HTML elements and formatting options, including paragraphs, horizontal rules, line breaks, preformatted text, styles, links, and more. It explains elements like <p>, <hr>, <br>, <pre>, how to use inline styles to control colors, fonts and sizes, and link syntax using the <a> tag and href attribute. CSS is introduced as a way to format layout and various CSS properties are defined including color, font, size, border, and padding.

Uploaded by

Shawn Newton
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Computer Reviewer (2nd Quarter)

HTML Paragraphs
• A paragraph always starts on a new line and is usually a block of text.
• 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.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens and resized windows will create different results.
• With HTML, you cannot change the display by adding extra spaces or
extra lines in your HTML code.
• The browser will automatically remove any extra spaces and lines when
the page is displayed
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 (or define a change) in an HTML
page:
• The <hr> tag is an empty tag, which means that it has no end tag.
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
Example (imagine there is a poem):
<!DOCTYPE html>
<html>
<body>
<pre>
This is a poem
</pre>
</body>
</html>

HTML Styles
• HTML style attribute is used to add styles to element, such as color, font,
size, and more

HTML Style Attributes


• Setting the style of an HTML element can be done with style attribute
• The HTML style attribute has the following syntax:
<tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.

Background Colour
• The CSS background-colour property defines the background colour for
an HTML element
• Set the background colour for a page to powder blue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Text Colour
• The CSS colour property defines the text colour for an HTML element
<h1 style="color:blue;">This is a heading.</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
• The CSS font-family property defines the font to be used for an HTML
element:

<h1 style="font-family:verdana;">This is a heading</h1>


<p style="font-family:courier;">This is a paragraph.</p>

Text Alignment
• The CSS text-align property defines the horizontal text alignment for an
HTML element:
<h1 style="text-align:center;">Centered Heading.</h1>
<p style="text-align:center;">Centered Paragraph.</p>

HTML Text Formatting


• HTML Formatting is a process of formatting text for better look and feel.
• HTML provides us ability to format text without using CSS.
• There are many formatting tags in HTML. These tags are used to make
text bold, italicized, or underlined.
• HTML contains several elements for defining text with a special meaning
HTML Formatting Elements
• Formatting elements were designed to display special types of text
<strong> - Important text
<b> - Bold text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Super subscript text

HTML <b> and <strong> Elements


• The HTML <b> element defines bold text, without any extra importance
<b>This text is bold</b>
• The HTML <strong> element defines text with strong importance. The
content inside is typically displayed in bold.
<strong>This text is important!</strong>

HTML <i> and <em> Elements


• The HTML <i> element defines a part of a text in an alternative voice or
mood. The content inside is typically displayed in italic
<i>This text is italic</i>
• The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic
<em>This text is emphasized</em>

HTML <small> Elements


• The HTML <small> element defines smaller text
<small>This is some smaller text.</small>

HTML Styles - CSS


• CSS stands for Cascading Style Sheets
What is CSS?
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
Using CSS
CSS can be added to HTML documents in 3 ways:
•Inline - by using the style attribute inside HTML elements
•Internal - by using a <style> element in the <head> section
•External - by using a <link> element to link to an external CSS file
1. Inline CSS
• An inline CSS is used to apply a unique style to a single HTML element.
• An inline CSS uses the style attribute of an HTML element.
2. Internal CSS
• An internal CSS is used to define a style for a single HTML page.
• An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
3. External CSS
• An external style sheet 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
CSS Colours, Fonts and Sizes
• The CSS colour property defines the text colour 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.
• Tip: You can define a border for nearly all HTML elements.
CSS Padding
• The CSS padding property defines a padding (space) between the text
and the border.
HTML Links - Hyperlinks
• 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.
HTML Links - Syntax
• 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.
HTML Links - The Target Attribute
• 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 specifies where to open the linked document:
_self - Default. Opens the document in the same window/tab as it was clicked
_parent - Opens the document in the parent frame
_blank - Opens the document in a new window or tab
_top - Opens the document in the full body of the window

HTML Links - Different Colors


• An HTML link is displayed in a different color depending on whether it
has been visited, is unvisited, or is active.
HTML Link Colors
By default, a link will appear like this (in all browsers):
•An unvisited link is underlined and blue
•A visited link is underlined and purple
•An active link is underlined and red
You can change the link state colors, by using CSS:

You might also like