Scribd
Upload
22 views

HTML Course

The document provides an overview of HTML including what HTML is, common HTML elements like headings, paragraphs, links and images, empty elements, attributes, formatting elements, comments, and how to add CSS to HTML.

Uploaded by

alikhan.ibnsina.un
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
22 views

HTML Course

The document provides an overview of HTML including what HTML is, common HTML elements like headings, paragraphs, links and images, empty elements, attributes, formatting elements, comments, and how to add CSS to HTML.

Uploaded by

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

Crash course of html

Crash course of html


Crash course of html
Crash course of html

What is HTML?
 HTML stands for Hyper Text Markup Language
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
 The <!DOCTYPE html> declaration defines that this document is an HTML5
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all
the visible contents, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?


An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>


HTML Headings

H1 topic
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

HTML Links

HTML links are defined with the <a> tag:

<a href="https://www.w3schools.com">This is a link</a>


The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Example

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

HTML is Not Case Sensitive


HTML tags are not case sensitive: <P> means the same as <p>.

The HTML standard does not require lowercase tags, but W3C recommends lowercase in HTML, and
demands lowercase for stricter document types like XHTML.

HTML Attributes

All HTML elements can have attributes

Attributes provide additional information about elements

Attributes are always specified in the start tag

Attributes usually come in name/value pairs like: name="value"

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="https://www.w3schools.com/images/img_girl.jpg".

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".

The title Attribute


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:

Example

<p title="I'm a tooltip">This is a paragraph.</p>

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:

Example

<h1>This is heading 1</h1>

<p>This is some text.</p>

<hr>
<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

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:

Solution - 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

<pre>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

 Use the style attribute for styling HTML elements


 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment

HTML Formatting Elements


Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML Quotation and Citation Elements

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation


HTML Comment Tag
You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->

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

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, and easier for you to try it yourself.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color: blue;

font-family: verdana;

font-size: 300%;

p{

color: red;
font-family: courier;

font-size: 160%;

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Link to External CSS


External style sheets can be referenced with a full URL or with a path relative to
the current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

<link rel="stylesheet" href="/html/styles.css">

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.

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

Example
Use target="_blank" to open the linked document in a new browser window or
tab:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

HTML Links - Use an Image as a Link


To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

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):

Example
<a href="mailto:[email protected]">Send email</a>

Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click
of a button:
Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>

 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

Background Image on a HTML element


To add a background image on an HTML element, use the HTML style attribute
and the CSS background-image property:

Example
Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">

You might also like