Web sites development (laboratories)

w3schools.com Summer semester 2018

WEB SITES DEVELOPMENT (LABORATORIES) !1

What is New in HTML5? first cats for fences 1

Let's take a look at Wikipedia HTML5[6] is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard. It was published in October 2014 by the World Wide Web Consortium (W3C)[1] to improve the language with support for the latest multimedia, while keeping it both easily readable by humans and consistently understood by computers and devices such as web browsers, parsers, etc. HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.

HTML5 includes detailed processing models to encourage more interoperable implementations; it extends, improves and rationalizes the markup available for documents, and introduces markup and application programming interfaces (APIs) for complex web applications.[2] For the same reasons, HTML5 is also a candidate for cross-platform mobile applications, because it includes features designed with low-powered devices in mind. Many new syntactic features are included. To natively include and handle multimedia and graphical content, the new <video>, <audio> and <canvas> elements were added, and support for scalable vector graphics (SVG) content and MathML for mathematical formulas. To enrich the semantic content of documents, new page structure elements such as <main>, <section>, <article>, <header>, <footer>, <aside>, <nav> and <figure>, are added. New attributes are introduced, some elements and attributes have been removed, and others such as <a>, <cite> and <menu> have been changed, redefined or standardized.

Polish idiom (try to find meaning :) )1

WEB SITES DEVELOPMENT (LABORATORIES) !2

In addition to specifying markup, HTML5 specifies scripting application programming interfaces (APIs) that can be used with JavaScript.[48] Existing Document Object Model (DOM) interfaces are extended and de facto features documented. There are also new APIs, such as: • Canvas; • Timed Media Playback; • Offline; • Editable content; • Drag and drop; • History; • MIME type and protocol handler registration; • Microdata; • Web Messaging; • Web Storage – a key-value pair storage framework that provides behaviour similar to cookies but with larger storage capacity and improved API.

Not all of the above technologies are included in the W3C HTML5 specification, though they are in the WHATWG HTML specification.[3] Some related technologies, which are not part of either the W3C HTML5 or the

WEB SITES DEVELOPMENT (LABORATORIES) !3

WHATWG HTML specification, are as follows. The W3C publishes specifications for these separately: • Geolocation; • Web SQL Database – a local SQL Database (no longer maintained); • IndexedDB – an indexed hierarchical key-value store (formerly WebSimpleDB); • File – an API intended to handle file uploads and file manipulation; • Directories and System – an API intended to satisfy client-side-storage use cases not well served by databases; • File Writer – an API for writing to files from web applications; • Web Audio – a high-level JavaScript API for processing and synthesizing audio in web applications; • ClassList. • Web Cryptography • WebRTC HTML5 cannot provide animation within web pages. Additional JavaScript or CSS3 is necessary for animating HTML elements. Animation is also possible using JavaScript and HTML 4, and within SVG elements through SMIL, although browser support of the latter remains uneven as of 2011.

WEB SITES DEVELOPMENT (LABORATORIES) !4

Html Editor Web pages can be created and modified by using professional HTML editors. However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac). Write some HTML into Notepad.

Save the file on your computer. Select File > Save as in the Notepad menu. Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with"). The result will look much like this: There are certain rules on how HTML must be written if it is to conform to W3C standards for the World Wide Web. Following these rules means that web sites are accessible on all types and makes of computer, to able-bodied and people with disabilities, and also on wireless devices like mobile phones and PDAs, with their limited bandwidths and screen sizes. However, most HTML documents on the web do not meet the requirements of W3C standards. In a study conducted in 2011 on the 350 most popular web sites (selected by the Alexa index), 94 percent of websites fail the web standards markup and style

WEB SITES DEVELOPMENT (LABORATORIES) !5

sheet validation tests, or apply character encoding improperly. Even those syntactically correct documents may be inefficient due to an unnecessary use of repetition, or based upon rules that have been deprecated for some years. Current W3C recommendations on the use of CSS with HTML were first formalised by W3C in 1996 and have been revised and refined since then. See CSS, XHTML, W3C's current CSS recommendation and W3C's current HTML recommendation. These guidelines emphasise the separation of content (HTML or XHTML) from style (CSS). This has the benefit of delivering the style information once for a whole site, not repeated in each page, let alone in each HTML element. WYSIWYG editor designers have been struggling ever since with how best to present these concepts to their users without confusing them by exposing the underlying reality. Modern WYSIWYG editors all succeed in this to some extent, but none of them has succeeded entirely. However a web page was created or edited, WYSIWYG or by hand, in order to be successful among the greatest possible number of readers and viewers, as well as to maintain the 'worldwide' value of the Web itself, first and foremost it should consist of valid markup and code.It should not be considered ready for the World Wide Web, until its HTML and CSS syntax have been successfully validated using either the free W3C validator services (W3C HTML Validator and W3C CSS Validator) or some other trustworthy alternatives.

WEB SITES DEVELOPMENT (LABORATORIES) !6

Accessibility of web pages by those with physical, eyesight or other disabilities is not only a good idea considering the ubiquity and importance of the web in modern society, but is also mandated by law. In the U.S., the Americans with Disabilities Act and in the U.K., the Disability Discrimination Act place requirement on web sites operated by publicly-funded organizations. In many other countries similar laws either already exist or soon will. Making pages accessible is more complex than just making them valid; that is a prerequisite but there are many other factors to be considered.Good web design, whether done using a WYSIWYG tool or not needs to take account of these too. Whatever software tools are used to design, create and maintain web pages, the quality of the underlying HTML is dependent on the skill of the person who works on the page. Some knowledge of HTML, CSS and other scripting languages as well as a familiarity with the current W3C recommendations in these areas will help any designer produce better web pages, with a WYSIWYG HTML editor and withoutAn HTML editor is a computer program for editing

HTML, the markup of a webpage. Many HTML editors handle not only HTML, but also related technologies such as CSS, XML and JavaScript or

WEB SITES DEVELOPMENT (LABORATORIES) !7

ECMAScript. In some cases they also manage communication with remote web servers via FTP and WebDAV, and version control systems such as Subversion or Git. Many word processing, graphic design and page layout programs that are not dedicated to web design, such as Microsoft Word or Quark XPress, also have the ability to function as HTML editors.

The following tables [6] compare general and technical information for a number of HTML editors:

Editor Version Year Creator Software license

Amaya (Discontinued) 11.4.4 (January 18) 2012 W3C, INRIA W3C

Aptana Studio 3.6.0 (August 1) 2014 Aptana GPL

Arachnophilia 5.5, build 2914 (January 11) 2016 Paul Lutus [1] LGPL

Bluefish 2.2.10 (January 27) 2017 Bluefish GPL

BlueGriffon 3.0.1 (November 22) 2017 Disruptive Innovations MPL 1.1/GPL 2.0/LGPL 2.1

Brackets 1.11 (September 25) 2017 Adobe MIT License

Claris Homepage (Discontinued) 3.0 1998 Claris Proprietary

Coda 2 2012 Panic, Inc. Proprietary

Codelobster 5.10.1 (August 22) 2016 Codelobster Software Proprietary

CoffeeCup HTML Editor 15.1 (July 10) 2015 CoffeeCup Software Proprietary

Contribute CS6.5 (8)(August 23) 2012 Adobe Systems (formerly Macromedia) Proprietary

Dreamweaver CC 2014 (14.1) (6 October) 2014 Adobe Systems (formerly

Macromedia) Proprietary

EZGenerator 4.1 (December) 2012 Image-Line Proprietary

Freeway 5.4.2 (November) 2009 Softpress Proprietary

GoLive (Discontinued) 9.0 (June 1) 2007 Adobe Systems (formerly GoLive Systems) Proprietary

Google Web Designer (April) 2014 Google, Inc. Proprietary

HTML-Kit 292 Chami.com Proprietary

KompoZer (Discontinued) 0.7.10/0.8b3 (August 30, 2007/ March 1, 2010) 2010 Kaze MPL 1.1/GPL 2.0/LGPL 2.1

LibreOffice 5.0.4 (December) 2015 The Document Foundation Mozilla Public License/Apache License 2.0/others

Maqetta Preview 5 (March 28) 2013 IBM BSD or AFL

Microsoft Expression Web (Discontinued) 4.0.1460.0 (December 20) 2012 Microsoft Proprietary

Microsoft Office FrontPage (Discontinued) 11.0.8174 (October 21) 2003 Microsoft Proprietary

Microsoft FrontPage Express (Discontinued) 2.0 1997 Microsoft Proprietary

Web Architect 6.9.1 (July 25) 2012 mirabyte Proprietary

WEB SITES DEVELOPMENT (LABORATORIES) !8

My First Web Page[4] ll HTML documents must start with a document type declaration: <!DOCTYPE html>. The HTML document itself begins with <html> and ends with </html>. The visible part of the HTML document is between <body> and </body>. HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

Microsoft SharePoint Designer (Discontinued) 2007 (December 4) 2006 Microsoft Proprietary

Microsoft Visual Web Developer 2008 Microsoft Proprietary

Mobirise 4.5 2015 Mobirise.com Proprietary

Mozilla Composer (Discontinued) 1.7.13 (April 21) 2006 Mozilla Foundation MPL 1.1/GPL 2.0/LGPL 2.1

Nvu (Discontinued) 1.0 (June 28) 2005 Linspire / Daniel Glazman MPL 1.1/GPL 2.0/LGPL 2.1

openElement 1.44 (January 21) 2014 openElement Apache License 2.0

OpenOffice.org 4.1.1 (August) 2014Oracle Corporation

(formerly Sun Microsystems)

Mozilla Public License/Apache License 2.0/others

oXygenXML Editor[2] 17.1 (October) 2015 Syncro SoftProprietary (some

components Apache License 2.0)

Quanta Plus (Discontinued) 3.5.9 (February 20) 2008 The Quanta Team GPL

Rapidweaver 7.1 2016 Realmac Software Proprietary

RocketCake 1.4 2017 Ambiera Proprietary

SeaMonkey Composer 2.49.1 (November 4) 2017 SeaMonkey Council MPL

TextMate 2.0 Preview (August 12) 2012 Macromates GPL

TOWeb 5.07 (July 28) 2013 Lauyan Software Proprietary

WebStorm IDE 7.0 (September 26) 2013 WebStorm IDE Proprietary

WEB SITES DEVELOPMENT (LABORATORIES) !9

This example contains four HTML elements: HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading: 

HTML paragraphs are defined with the <p> tag:

HTML links are defined with the <a> tag:

HTML images are defined with the <img> tag. The source file (src), alternative text (alt), width, and height are provided as 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:

WEB SITES DEVELOPMENT (LABORATORIES) !10

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:

Below is an alphabetical list of attributes used in HTML: 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

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

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 width of the border 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)

WEB SITES DEVELOPMENT (LABORATORIES) !11

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

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

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

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>, <fieldset>, <input>, <label>, <meter>, <object>, <output>, <select>, <textarea>

Specifies the name of the form the element belongs to

formaction <button>, <input> Specifies where to send the form-data when a form is submitted. Only for type="submit"

WEB SITES DEVELOPMENT (LABORATORIES) !12

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

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

Specifies the height of the element

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>, <base>, <link> Specifies the URL of the page the link goes to

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

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>, <option>, <optgroup> Specifies the title of the text track

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

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

max <input>, <meter>, <progress> Specifies the maximum value

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

media <a>, <area>, <link>, <source>, <style>

Specifies what media/device the linked document is optimized for

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

min <input>, <meter> Specifies a minimum value

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

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

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

Specifies the name of the element

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

WEB SITES DEVELOPMENT (LABORATORIES) !13

onabort <audio>, <embed>, <img>, <object>, <video>

Script to be run on abort

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

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

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

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

oncanplay <audio>, <embed>, <object>, <video>

Script to be run when a file is ready to start playing (when it has buffered enough to begin)

oncanplaythrough

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

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

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

oncontextmenu All visible elements. Script to be run when a context menu is triggered

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

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

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

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

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

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

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

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

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

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

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

ondurationchange

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

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

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

WEB SITES DEVELOPMENT (LABORATORIES) !14

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

Script to be run when an error occurs

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

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

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

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

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

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

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

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

Script to be run when the element is finished loading

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

onloadedmetadata

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

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

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

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

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

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

onmousewheel All visible elements. Script to be run when a mouse wheel is being scrolled 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 elements. Script to be run when the user pastes some content in an element

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

WEB SITES DEVELOPMENT (LABORATORIES) !15

onplay <audio>, <video> Script to be run when the media is ready to start playing

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

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

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

onratechange <audio>, <video> Script to be run each time the playback rate changes (like 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 elements. Script to be run when an element's scrollbar is being scrolled

onsearch <input> Script to be run when the user writes something in a search field (for <input="search">)

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

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

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

onshow <menu> Script to be run when a <menu> element is shown as a context menu

onstalled <audio>, <video> Script to be run when the browser is unable to fetch the 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>, <video> Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason

ontimeupdate <audio>, <video> Script to be run when the playing position has changed (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)

onvolumechange <audio>, <video> Script to be run each time the volume of a video/audio has been changed

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

WEB SITES DEVELOPMENT (LABORATORIES) !16

onwheel All visible elements. Script to be run when the mouse wheel rolls up or down 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>, <textarea> Specifies a short hint that describes the expected value of 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>, <video> Specifies if and how the author thinks the audio/video should be loaded when the page loads

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

rel <a>, <area>, <link> Specifies the relationship between the current document and the linked document

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

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

scoped <style> Specifies that the styles only apply to this element's parent element and that element's child elements

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

shape <area> Specifies the shape of the area

size <input>, <select> Specifies the width, in characters (for <input>) or specifies the number of visible options (for <select>)

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

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

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

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

Specifies the URL of the media file

WEB SITES DEVELOPMENT (LABORATORIES) !17

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 output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed: But try this HTML elements and their attributes:

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>, <base>, <form> Specifies the target for where to open the linked 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 <button>, <embed>, <input>, <link>, <menu>, <object>, <script>, <source>, <style>

Specifies the type of element

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

value <button>, <input>, <li>, <option>, <meter>, <progress>, <param>

Specifies the value of the element

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

Specifies the width of the element

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

Tag Description

<p> Defines a paragraph

WEB SITES DEVELOPMENT (LABORATORIES) !18

The Html Style 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. But CSS will be in the future (next lab).

The background-color property defines the background color for an HTML element. This example sets the background color for a page to powderblue:

The color property defines the text color for an HTML element:

<br> Inserts a single line break

<pre> Defines pre-formatted text

WEB SITES DEVELOPMENT (LABORATORIES) !19

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

The font-size property defines the text size for an HTML element:

The text-align property defines the horizontal text alignment for an HTML element:

HTML also defines special elements for defining text with a special meaning. HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines italic text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

WEB SITES DEVELOPMENT (LABORATORIES) !20

In HTML, a color can be specified by using a color name:

Examples:

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

<del> Defines deleted text

<mark> Defines marked/highlighted text

WEB SITES DEVELOPMENT (LABORATORIES) !21

HSLA color values are an extension of HSL color values with an alpha channel - which specifies the opacity for a color. An HSLA color value is specified with: hsla(hue, saturation, lightness, alpha) The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all).

Example

WEB SITES DEVELOPMENT (LABORATORIES) !22

Final Exercise You should create a page so that it would look like the one presented in the screenshot below.

References (1) HTML5 is a W3C recommendation". W3C Blog. 28 October 2014.

Retrieved 28 October 2014. (2) "HTML5 Differences from HTML4". World Wide Web Consortium. 19

October 2010. Retrieved 4 December 2010. (3) Sergey Mavrody "Sergey's HTML5 & CSS3 Quick Reference. 2nd Edition".

Belisso Corp., 2012. ISBN 978-0-9833867-2-8 (4) https://www.w3schools.com/html/html5_intro.asp (5) Harold, Elliotte Rusty (2008). Refactoring HTML. Boston: Addison Wesley.

ISBN 978-0-321-50363-3. (6) Wikipedia - https://en.wikipedia.org

WEB SITES DEVELOPMENT (LABORATORIES) !23