Академический Документы
Профессиональный Документы
Культура Документы
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
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.
<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
Attribute Description
alt Specifies an alternative text for an image, when the image cannot be
displayed
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
alt <area>, <img>, Specifies an alternate text when the original element fails
<input> to display
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
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.
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
data-* Global Attributes Used to store custom data private to the page or
application
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
download <a>, <area> Specifies that the target will be downloaded when a user
clicks on the hyperlink
dropzone Global Attributes Specifies whether the dragged data is copied, moved, or
linked, when dropped
form <button>, Specifies the name of the form the element belongs to
<fieldset>,
<input>,
<label>,
<meter>,
<object>,
<output>,
<select>,
<textarea>
headers <td>, <th> Specifies one or more headers cells a cell is related to
8
href <a>, <area>, Specifies the URL of the page the link goes to
<base>, <link>
loop <audio>, Specifies that the audio/video will start over again, every
<video> time it is finished
method <form> Specifies the HTTP method to use when sending form-
data
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
novalidate <form> Specifies that the form should not be validated when
submitted
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.
oncopy All visible Script to be run when the content of the element is being
elements. copied
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.
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
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")
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.
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
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>
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).
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
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)
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
placeholder <input>, Specifies a short hint that describes the expected value of
<textarea> the element
preload <audio>, Specifies if and how the author thinks the audio/video
<video> should be loaded when the page loads
required <input>, Specifies that the element must be filled out before
<select>, submitting the form
<textarea>
rowspan <td>, <th> Specifies the number of rows a table cell should span
spellcheck Global Attributes Specifies whether the element is to have its spelling and
grammar checked or not
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
step <input> Specifies the legal number intervals for an input field
target <a>, <area>, Specifies the target for where to open the linked
<base>, <form> document or where to submit the form
<param>
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
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
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