Embed Size (px)
Citation preview
HTML INTRODUCTION
What is HTML ?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using
markup HTML elements are the building blocks of HTML pages HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to
render the content of the page
Syntax Of A Simple HTML Document
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
hello
</body>
</html>
NOW EXPLAINED THE ABOVE EXAMPLE
The <!DOCTYPE html> declaration defines this
document to be HTML5 The <html> element is the root element of an
HTML page The <head> element contains meta information
about the document The <title> element specifies a title for the
document The <body> element contains the visible page
content
HTML TAGS
HTML tags are element names surrounded by angle brackets:
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is
the end tag
The end tag is written like the start tag, but with
a forward slash inserted before the tag name
Tip: The start tag is also called the opening tag, and the end tag the closing tag.
<tagname>content goes here...</tagname>
Start Tag Element Content End Tag
<h1> My first heading </h1>
<p> My first paragraph </p>
<br>
HTML ELEMENTS An HTML element usually consists of a start tag and 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:
<p>My first paragraph.</p>
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).
NESTED HTML ELEMENTS HTML elements can be nested (elements can contain
elements).
All HTML documents consist of nested HTML elements.
This example contains four HTML elements:
EXAMPLE OF NESTED HTML ELEMENTS
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
EXPLAIN THE EXAMPLE OF NESTED HTML ELEMENTS
The <html> element defines the whole document.
It has a start tag <html> and an end tag </html>.
The element content is another HTML element (the <body> element).
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The <body> element defines the document body.
It has a start tag <body> and an end tag </body>.
The element content is two other HTML elements (<h1> and <p>).
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
The <p> element defines a paragraph.
It has a start tag <p> and an end tag </p>.
The element content is: My first paragraph.
<p>My first paragraph.</p>
The <h1> element defines a heading.
It has a start tag <h1> and an end tag </h1>.
The element content is: My First Heading.
<h1>My First Heading</h1>
HTML ATTRIBUTES All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
The href attribute HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
EXAMPLE
<a href="https://www.w3schools.com">This is a link</a>
The src attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:
EXAMPLE
<img src="img_girl.jpg"> Try it Yourself »
The width & height attribute
Images in HTML have a set of size attributes, which specifies the
width and height of the image: EXAMPLE
<img src="img_girl.jpg" width="500" height="600">
The image size is specified in pixels: width="500"
means 500 pixels wide. The alt attribute
The alt attribute specifies an alternative text to be
used, when an image cannot be displayed.
The value of the attribute can be read by screen
readers. This way, someone "listening" to the
webpage, e.g. a blind person, can "hear" the element.
Example <img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image does not exist:
Example <img src="img_typo.jpg" alt="Girl with a jacket">
The style attribute
The style attribute is used to specify the styling of an
element, like color, font, size etc.
EXAMPLE
<p style="color:red">I am a paragraph</p>
The lang attribute
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:
EXAMPLE
<!DOCTYPE html>
<html lang="en-US">
<body>
I am a web designer
</body>
</html>
Attributes 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
action <form> Specifies where to send the
form-data when a form is
submitted
The title attribute
Here, 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:
EXAMPLE
<p title="I'm a tooltip">
This is a paragraph.
</p>
Html attributes
Below is an alphabetical list of some attributes often used in HTML:
align Not supported in HTML 5
Specifies the alignment according to surrounding
elements. Use CSS instead
alt <area>, <img>, <input> Specifies an alternate text when the original element
fails 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>, <input>,
<select>, <textarea>
Specifies that the element
should automatically get focus when the page loads
autoplay <audio>, <video> Specifies that the audio/video
will start playing as soon as it is ready
bgcolor Not supported in
HTML 5.
Specifies the background
color of an element. Use CSS instead
border Not supported in
HTML 5.
Specifies the background
color of an element. Use CSS
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>, <del>,
<ins>, <q>
Specifies a URL which
explains the quote/deleted/inserted text
class Global Attributes Specifies one or more classnames for an element
(refers to a class in a style
sheet)
color Not supported in
HTML 5.
Specifies the text color of an
element. Use CSS instead
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
contenteditable Global Attributes Specifies whether the content
of an element is editable or
not
contextmenu Global Attributes Specifies a context menu for
an element. The context menu
appears when a user right-clicks on the element
controls <audio>, <video> Specifies that audio/video
controls should be displayed (such as a play/pause button
etc)
coords <area> Specifies the coordinates of the area
data <object> Specifies the URL of the
resource to be used by the
object
datetime <del>, <ins>,
<time>
Specifies the date and 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>, <textarea> Specifies that the text
direction will be submitted
disabled <button>, <fieldset>, <input>,<optgroup>,
<option>, <select>,
<textarea>
Specifies that the specified element/group of elements
should be disabled
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
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>, <fieldset>, <input>, <label>,
<meter>, <object>,
<output>, <select>,
Specifies the name of the form the element belongs to
<textarea>
headers <td>, <th> Specifies one or more headers
cells a cell is related to
href <a>, <area>, <base>, <link>
Specifies the URL of the page the link goes to
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>, <video> Specifies that the audio/video
will start over again, every time it is finished
onafterprint <body> Script to be run after the
document is printed
onbeforeprint <body> Script to be run before the document is printed
onblur All visible elements. Script to be run when the
element loses focus
onclick All visible elements. Script to be run when the
element is being clicked
oncopy All visible elements. Script to be run when the
content of the element is being copied
onmouseover All visible elements. Script to be run when a mouse
pointer moves over an element
onmouseup All visible elements. Script to be run when a mouse button is released over an
element
selected <option> Specifies that an option should be pre-selected when the page
loads
HTML <!-------> TAG
EXAMPLE An HTML comment:
<!--This is a comment. Comments are not displayed in the
browser-->
<p>This is a paragraph.</p>
DEFINITION AND USAGE
The comment tag is used to insert comments
in the source code. Comments are not
displayed in the browsers.
You can use comments to explain your code,
which can help you when you edit the source
code at a later date. This is especially useful if
you have a lot of code.
![[MS-IPFFX]: InfoPath Form File Format...The InfoPath Form File Format, which, with an associated form template, specifies how a form server will render and edit the data in a form](https://img.pdfslide.us/doc/110x75/609af144dc71b15fd915b25a/ms-ipffx-infopath-form-file-format-the-infopath-form-file-format-which.jpg)
