Вы находитесь на странице: 1из 19

1

HTML
(1) HTML stands for “Hyper Text Markup Language”.
(2) HTML describes the structure of the webpage.
(3) HTML consists of a series of elements.
(4) HTML tells the browser how to display the content.
(5) HTML elements are represented by tags.
(6) Browsers do not display the HTML tags, but use them to render the content of the
page.
(7) A Simple HTML document:
<!DOCTYPE html>
<html>
<title>Page title</title>
<body>
<h1>My first heading</h1>
<h2>My second heading</h2>
<h3>My third heading</h3>
<h4>My fourth heading</h4>
<h5>My firth heading</h5>
<h6>My sixth heading</h6>
<p>My first paragraph</p>
</body>
</html>
(8) <!DOCTYPE html> declaration defines this document to be HTML5.
(9) <html> element is the root element of an HTML page.
(10) <head> element contains meta information about the document.
(11) The <title> element specifies a title for the document.
(12) The <body> element contains the visible page content
(13) The <h1> element defines a large heading.
(14) The <p> element defines a paragraph.
(15) HTML Tags:
1. HTML tags are element names surrounded by angle brackets.
<tagname>content goes here…. </tagname>
2. HTML tags normally come in pairs like <p> and </p>
3. The first tag in pair is the start tag, the second tag is the end tag.
4. The end tag is written like the start tag, but with a forward slash inserted
before the tag name.
5. The start tag is also called the opening tag and the end tag the closing tag.
2

(16) The purpose of web browser (Chrome, Edge, Firefox, Safari) is to read HTML
documents and display them. The browser does not display the HTML tags, but uses
them to determine how to display the document.
(17) HTML Page Structure:
<html>
<head>
<title> Page Title </title>
</head>
<body>
<h1> this is a heading</h1>
<p> this is a paragraph</p>
<p> this is another paragraph</p>
</body>
</html>
**Only the content inside the <body> section is displayed in a browser.
(18) The <!DOCTYPE> declaration represents the document type, and helps browsers to
display web pages correctly. It must appear only once, at the top of the page (before
any HTML tags). The <!DOCTYPE> declaration is not case sensitive.
The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html>
(19) HTML versions:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014
(20) HTML Headings:
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading.
<h6> defines the least important heading.
(21) HTML Paragraphs:
HTML paragraphs are defined with the <p> tags.
(22) HTML links: HTML links are defined with the <a> tag.
Eg: <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.
3

(23) HTML Images: HTML images are defined with <img> tag.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
The source file (src), alternative text (alt), width, and height are provided as
attributes.
(24) HTML Buttons: HTML buttons are defined with the <button> tag.
<button>Click me</button>
(25) HTML lists: HTML lists are defined with <ul> (unordered/bullet list) or the <ol>
(ordered/numbered list) tag, followed by <li> tags (list items).
(26) HTML Elements:
An HTML element usually consists of a start tag and an end tag, with the content
inserted in between:
<tagname>content goes here….</tagname>
The HTML element is everything from the start tag to the end tag.

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>
HTML elements with no content are called empty elements. Empty elements do not
have an end tag, such as the <br> element (which indicates a line break).
(27) Nested HTML Elements:
HTML elements can be nested (elements can contain elements).
All HTML documents consists of nested HTML elements.
E.g.:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
(28) Empty HTML elements:
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag.
E.g.: <p>This is a <br> paragraph with a line break.</p>
(29) HTML is not case sensitive. i.e. <P> is same as <p>.
(30) HTML Attributes: Attributes provide additional information about HTML elements.
 All HTML elements can have attributes.
 Attributes provide additional information about the element.
4

 Attributes are always specified in the start tag.


 Attributes usually come in name/value pairs like name=”value”
The href attribute:
HTML lines are defined with the <a> tag. The link address is specified in the
herf attribute.
E.g.: <a href=”https://w3schools.com”>This is a link</a>
The src attribute:
HTML images are defined with <img> tag.
The file name of the images source is specified in the src attribute.
E.g.: <img src=”img_girl.jpg”>
The width and height attributes:
HTML images also have width and height attributes, which specifies the width
and height of the image.
E.g.: <img src=”img_girl.jpg” width=”500” height=”600”>
The width and height are specified in pixels by default,
The alt attribute:
The alt attribute specifies an alternative text to be used, if an image cannot be
displayed.
E.g.: <img src=”img_girl.jpg” alt =”Girl with a jacket”>
The alt attribute is also useful if the image cannot be displayed (e.g. if it does
not exist).
The style attributes:
The style attribute is used to specify the styling of an element, like color, font,
size etc.
E.g.: <p style=“color:red”>This is a paragraph.</p>
The lang attributes:
The language of the document can be declared in the <html> tag.
The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen
readers) and search engines:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
The first two letters specify the language (en). If there is a dialect, add two
more letters (US).
5

The title attribute:


A title attribute is added to the <p> element.
The value of the title attribute will be displayed as a tooltip when you mouse
over the paragraph.
<p title="I'm a tooltip">
This is a paragraph.
</p>
(31) All HTML elements can have attributes.
(32) The title attribute provides additional “tool-tip” information.
(33) The href attribute provides address information for links.
(34) The width and height attributes provide size information for images.
(35) The alt attribute provides text for screen readers.

(36) HTML Attributes


(37) Below is an alphabetical list of some attributes often used in HTML,
which you will learn more about in this tutorial:

Attribute Description

alt Specifies an alternative text for an image, when the image cannot be
displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a tool tip)

All HTML Attributes

Attribute Belongs to Description

accept <input> Specifies the types of files that the server accepts (only
for type="file")

accept-charset <form> Specifies the character encodings that are to be used for
the form submission

accesskey Global Attributes Specifies a shortcut key to activate/focus an element


6

action <form> Specifies where to send the form-data when a form is


submitted

align Not supported in Specifies the alignment according to surrounding


HTML 5. elements. Use CSS instead

alt <area>, <img>, Specifies an alternate text when the original element fails
<input> to display

async <script> Specifies that the script is executed asynchronously (only


for external scripts)

autocomplete <form>, <input> Specifies whether the <form> or the <input> element
should have autocomplete enabled

autofocus <button>, Specifies that the element should automatically get focus
<input>, when the page loads
<select>,
<textarea>

autoplay <audio>, Specifies that the audio/video will start playing as soon as
<video> it is ready

bgcolor Not supported in Specifies the background color of an element. Use CSS
HTML 5. instead

border Not supported in Specifies the width of the border of an element. Use CSS
HTML 5. instead

charset <meta>, <script> Specifies the character encoding

checked <input> Specifies that an <input> element should be pre-selected


when the page loads (for type="checkbox" or
type="radio")

cite <blockquote>, Specifies a URL which explains the


<del>, quote/deleted/inserted text
<ins>, <q>

class Global Attributes Specifies one or more classnames for an element (refers
to a class in a style sheet)

color Not supported in Specifies the text color of an element. Use CSS instead
HTML 5.

cols <textarea> Specifies the visible width of a text area

colspan <td>, <th> Specifies the number of columns a table cell should span

content <meta> Gives the value associated with the http-equiv or name
attribute

contenteditabl Global Attributes Specifies whether the content of an element is editable or


e not

controls <audio>, Specifies that audio/video controls should be displayed


<video> (such as a play/pause button etc)

coords <area> Specifies the coordinates of the area


7

data <object> Specifies the URL of the resource to be used by the


object

data-* Global Attributes Used to store custom data private to the page or
application

datetime <del>, <ins>, Specifies the date and time


<time>

default <track> Specifies that the track is to be enabled if the user's


preferences do not indicate that another track would be
more appropriate

defer <script> Specifies that the script is executed when the page has
finished parsing (only for external scripts)

dir Global Attributes Specifies the text direction for the content in an element

dirname <input>, Specifies that the text direction will be submitted


<textarea>

disabled <button>, Specifies that the specified element/group of elements


<fieldset>, should be disabled
<input>,
<optgroup>,
<option>,
<select>,
<textarea>

download <a>, <area> Specifies that the target will be downloaded when a user
clicks on the hyperlink

draggable Global Attributes Specifies whether an element is draggable or not

dropzone Global Attributes Specifies whether the dragged data is copied, moved, or
linked, when dropped

enctype <form> Specifies how the form-data should be encoded when


submitting it to the server (only for method="post")

for <label>, <output Specifies which form element(s) a label/calculation is


> bound to

form <button>, Specifies the name of the form the element belongs to
<fieldset>,
<input>,
<label>,
<meter>,
<object>,
<output>,
<select>,
<textarea>

formaction <button>, Specifies where to send the form-data when a form is


<input> submitted. Only for type="submit"

headers <td>, <th> Specifies one or more headers cells a cell is related to
8

height <canvas>, Specifies the height of the element


<embed>,
<iframe>,
<img>,
<input>,
<object>,
<video>

hidden Global Attributes Specifies that an element is not yet, or is no longer,


relevant

high <meter> Specifies the range that is considered to be a high value

href <a>, <area>, Specifies the URL of the page the link goes to
<base>, <link>

hreflang <a>, <area>, Specifies the language of the linked document


<link>

http-equiv <meta> Provides an HTTP header for the information/value of the


content attribute

id Global Attributes Specifies a unique id for an element

ismap <img> Specifies an image as a server-side image-map

kind <track> Specifies the kind of text track

label <track>, Specifies the title of the text track


<option>,
<optgroup>

lang Global Attributes Specifies the language of the element's content

list <input> Refers to a <datalist> element that contains pre-defined


options for an <input> element

loop <audio>, Specifies that the audio/video will start over again, every
<video> time it is finished

low <meter> Specifies the range that is considered to be a low value

max <input>, Specifies the maximum value


<meter>,
<progress>

maxlength <input>, Specifies the maximum number of characters allowed in


<textarea> an element

media <a>, <area>, Specifies what media/device the linked document is


<link>, <source> optimized for
, <style>

method <form> Specifies the HTTP method to use when sending form-
data

min <input>, Specifies a minimum value


<meter>
9

multiple <input>, Specifies that a user can enter more than one value
<select>

muted <video>, Specifies that the audio output of the video should be
<audio> muted

name <button>, Specifies the name of the element


<fieldset>,
<form>,
<iframe>,
<input>,
<map>,
<meta>,
<object>,
<output>,
<param>,
<select>,
<textarea>

novalidate <form> Specifies that the form should not be validated when
submitted

onabort <audio>, Script to be run on abort


<embed>,
<img>,
<object>,
<video>

onafterprint <body> Script to be run after the document is printed

onbeforeprint <body> Script to be run before the document is printed

onbeforeunloa <body> Script to be run when the document is about to be


d unloaded

onblur All visible Script to be run when the element loses focus
elements.

oncanplay <audio>, Script to be run when a file is ready to start playing (when
<embed>, it has buffered enough to begin)
<object>,
<video>

oncanplaythro <audio>, Script to be run when a file can be played all the way to
ugh <video> the end without pausing for buffering

onchange All visible Script to be run when the value of the element is changed
elements.

onclick All visible Script to be run when the element is being clicked
elements.

oncontextmen All visible Script to be run when a context menu is triggered


u elements.

oncopy All visible Script to be run when the content of the element is being
elements. copied

oncuechange <track> Script to be run when the cue changes in


10

a <track> element

oncut All visible Script to be run when the content of the element is being
elements. cut

ondblclick All visible Script to be run when the element is being double-clicked
elements.

ondrag All visible Script to be run when the element is being dragged
elements.

ondragend All visible Script to be run at the end of a drag operation


elements.

ondragenter All visible Script to be run when an element has been dragged to a
elements. valid drop target

ondragleave All visible Script to be run when an element leaves a valid drop
elements. target

ondragover All visible Script to be run when an element is being dragged over a
elements. valid drop target

ondragstart All visible Script to be run at the start of a drag operation


elements.

ondrop All visible Script to be run when dragged element is being dropped
elements.

ondurationcha <audio>, Script to be run when the length of the media changes
nge <video>

onemptied <audio>, Script to be run when something bad happens and the file
<video> is suddenly unavailable (like unexpectedly disconnects)

onended <audio>, Script to be run when the media has reach the end (a
<video> useful event for messages like "thanks for listening")

onerror <audio>, Script to be run when an error occurs


<body>,
<embed>,
<img>,
<object>,
<script>,
<style>,
<video>

onfocus All visible Script to be run when the element gets focus
elements.

onhashchange <body> Script to be run when there has been changes to the
anchor part of the a URL

oninput All visible Script to be run when the element gets user input
elements.

oninvalid All visible Script to be run when the element is invalid


elements.
11

onkeydown All visible Script to be run when a user is pressing a key


elements.

onkeypress All visible Script to be run when a user presses a key


elements.

onkeyup All visible Script to be run when a user releases a key


elements.

onload <body>, Script to be run when the element is finished loading


<iframe>,
<img>,
<input>,
<link>,
<script>,
<style>

onloadeddata <audio>, Script to be run when media data is loaded


<video>

onloadedmeta <audio>, Script to be run when meta data (like dimensions and
data <video> duration) are loaded

onloadstart <audio>, Script to be run just as the file begins to load before
<video> anything is actually loaded

onmousedown All visible Script to be run when a mouse button is pressed down on
elements. an element

onmousemove All visible Script to be run as long as the mouse pointer is moving
elements. over an element

onmouseout All visible Script to be run when a mouse pointer moves out of an
elements. element

onmouseover All visible Script to be run when a mouse pointer moves over an
elements. element

onmouseup All visible Script to be run when a mouse button is released over an
elements. element

onmousewhee All visible Script to be run when a mouse wheel is being scrolled
l elements. over an element

onoffline <body> Script to be run when the browser starts to work offline

ononline <body> Script to be run when the browser starts to work online

onpagehide <body> Script to be run when a user navigates away from a page

onpageshow <body> Script to be run when a user navigates to a page

onpaste All visible Script to be run when the user pastes some content in an
elements. element

onpause <audio>, Script to be run when the media is paused either by the
<video> user or programmatically
12

onplay <audio>, Script to be run when the media has started playing
<video>

onplaying <audio>, Script to be run when the media has started playing
<video>

onpopstate <body> Script to be run when the window's history changes.

onprogress <audio>, Script to be run when the browser is in the process of


<video> getting the media data

onratechange <audio>, Script to be run each time the playback rate changes (like
<video> when a user switches to a slow motion or fast forward
mode).

onreset <form> Script to be run when a reset button in a form is clicked.

onresize <body> Script to be run when the browser window is being


resized.

onscroll All visible Script to be run when an element's scrollbar is being


elements. scrolled

onsearch <input> Script to be run when the user writes something in a


search field (for <input="search">)

onseeked <audio>, Script to be run when the seeking attribute is set to false
<video> indicating that seeking has ended

onseeking <audio>, Script to be run when the seeking attribute is set to true
<video> indicating that seeking is active

onselect All visible Script to be run when the element gets selected
elements.

onstalled <audio>, Script to be run when the browser is unable to fetch the
<video> media data for whatever reason

onstorage <body> Script to be run when a Web Storage area is updated

onsubmit <form> Script to be run when a form is submitted

onsuspend <audio>, Script to be run when fetching the media data is stopped
<video> before it is completely loaded for whatever reason

ontimeupdate <audio>, Script to be run when the playing position has changed
<video> (like when the user fast forwards to a different point in the
media)

ontoggle <details> Script to be run when the user opens or closes the
<details> element

onunload <body> Script to be run when a page has unloaded (or the
browser window has been closed)

onvolumechan <audio>, Script to be run each time the volume of a video/audio


ge <video> has been changed
13

onwaiting <audio>, Script to be run when the media has paused but is
<video> expected to resume (like when the media pauses to buffer
more data)

onwheel All visible Script to be run when the mouse wheel rolls up or down
elements. over an element

open <details> Specifies that the details should be visible (open) to the
user

optimum <meter> Specifies what value is the optimal value for the gauge

pattern <input> Specifies a regular expression that an <input> element's


value is checked against

placeholder <input>, Specifies a short hint that describes the expected value of
<textarea> the element

poster <video> Specifies an image to be shown while the video is


downloading, or until the user hits the play button

preload <audio>, Specifies if and how the author thinks the audio/video
<video> should be loaded when the page loads

readonly <input>, Specifies that the element is read-only


<textarea>

rel <a>, Specifies the relationship between the current document


<area>, <link> and the linked document

required <input>, Specifies that the element must be filled out before
<select>, submitting the form
<textarea>

reversed <ol> Specifies that the list order should be descending


(9,8,7...)

rows <textarea> Specifies the visible number of lines in a text area

rowspan <td>, <th> Specifies the number of rows a table cell should span

sandbox <iframe> Enables an extra set of restrictions for the content in an


<iframe>

scope <th> Specifies whether a header cell is a header for a column,


row, or group of columns or rows

selected <option> Specifies that an option should be pre-selected when the


page loads

shape <area> Specifies the shape of the area

size <input>, Specifies the width, in characters (for <input>) or specifies


<select> the number of visible options (for <select>)

sizes <img>, <link>, Specifies the size of the linked resource


<source>
14

span <col>, Specifies the number of columns to span


<colgroup>

spellcheck Global Attributes Specifies whether the element is to have its spelling and
grammar checked or not

src <audio>, Specifies the URL of the media file


<embed>,
<iframe>,
<img>,
<input>,
<script>,
<source>,
<track>,
<video>

srcdoc <iframe> Specifies the HTML content of the page to show in the
<iframe>

srclang <track> Specifies the language of the track text data (required if
kind="subtitles")

srcset <img>, <source> Specifies the URL of the image to use in different
situations

start <ol> Specifies the start value of an ordered list

step <input> Specifies the legal number intervals for an input field

style Global Attributes Specifies an inline CSS style for an element

tabindex Global Attributes Specifies the tabbing order of an element

target <a>, <area>, Specifies the target for where to open the linked
<base>, <form> document or where to submit the form

title Global Attributes Specifies extra information about an element

translate Global Attributes Specifies whether the content of an element should be


translated or not

type <a>, <button>, Specifies the type of element


<embed>,
<input>,
<link>,
<menu>,
<object>,
<script>,
<source>,
<style>

usemap <img>, <object> Specifies an image as a client-side image-map

value <button>, Specifies the value of the element


<input>,
<li>,
<option>,
<meter>,
<progress>,
15

<param>

width <canvas>, Specifies the width of the element


<embed>,
<iframe>,
<img>,
<input>,
<object>, <vide
o>

wrap <textarea> Specifies how the text in a text area is to be wrapped


when submitted in a form
16

HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
** Browser automatically add some white space (a margin) before and after a heading.
Bigger Headings:
Each HTML heading has a default size. However, you can specify the size for any heading
with style attribute using the CSS font-size property.
E.g.: <h1 style="font-size:60px;">Heading 1</h1>
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>
The HTML <head> Element
The HTML <head> element is a container for metadata. HTML metadata is data about the
HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:
Example
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
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:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end tag.
17

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;">
The property is a CSS property. The value is a CSS value.

Background Color
The CSS background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
Example
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

Text Color
The CSS color property defines the text color for an HTML element:
Example
<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:
Example
18

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


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

Text Size
The CSS font-size property defines the text size for an HTML element:
Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

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

Chapter Summary
 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
19

HTML Text Formatting

Вам также может понравиться