Posts

Showing posts with the label T-HTML

What is HTML?

-
What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for H yper T ext M arkup L anguage A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content HTML Example A small HTML document: < !DOCTYPE html > < html > < head > < title > Page Title < /title > < /head > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html >
Post a Comment
Read more

HTML Basic

-
HTML Documents All HTML documents must start with a 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> . Example < !DOCTYPE html > < html > < body > < h1 > My First Heading < /h1 > < p > My first paragraph. < /p > < /body > < /html > HTML Headings HTML headings are defined with the <h1> to <h6> tags: Example < h1 > This is a heading < /h1 > < h2 > This is a heading < /h2 > < h3 > This is a heading < /h3 > HTML Paragraphs HTML paragraphs are defined with the <p> tag: Example < p > This is a paragraph. < /p > < p > This is another paragraph. < /p > HTML Links HTML links are defined with the <a> tag: Example < a href= "http://www.dreama
Post a Comment
Read more

HTML Styles

-
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 : style=" property : value; " The property is a CSS property. The value is a CSS value. HTML Background Color The background-color property defines the background color for an HTML element: This example sets the background for a page to lightgrey: Example < body style= "background-color:lightgrey;" > < h1 > This is a heading < /h1 > < p > This is a paragraph. < /p > < /body > HTML Text Color The 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 > HTML Fonts The font-family property defines the font to be used for an HTML element: Example < h1 style= "
Post a Comment
Read more

HTML Comments

-
Comment tags <!-- and --> are used to insert comments in HTML. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> Comments are not displayed by the browser, but they can help document your HTML. With comments you can place notifications and reminders in your HTML: Example <!-- This is a comment --> < p > This is a paragraph. < /p > <!-- Remember to add more information here --> Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: Example <!-- Do not display this at the moment <img border="0" src="pic_mountain.jpg" alt="Mountain"> --> Conditional Comments You might stumble upon conditional comments in HTML: <!--[if IE 8]>     .... some HTML here .... <![endif]--> Conditional comments defines HTML tags to be exe
Post a Comment
Read more

HTML Colors

-
RGB (Red, Green, Blue) With HTML, RGB color values can be specified using this formula: rgb(red, green, blue) Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255. For example, rgb(255,0,0) is displayed as red, because red is set to its highest value (255) and the others are set to 0. Hexadecimal Colors With HTML, RGB values can also be specified using hexadecimal color values in the form: #RRGGBB, where RR (red), GG (green) and BB (blue) are hexadecimal values between 00 and FF (same as decimal 0-255). For example, #FF0000 is displayed as red, because red is set to its highest value (FF) and the others are set to the lowest value (00).
Post a Comment
Read more

HTML Styles - CSS

-
Styling HTML with CSS CSS stands for C ascading S tyle S heets Styling can be added to HTML elements in 3 ways: Inline - using a style attribute in HTML elements Internal - using a <style> element in the HTML <head> section External - using one or more external CSS files Inline Styling (Inline CSS) Inline styling is used to apply a unique style to a single HTML element: Inline styling uses the style attribute. Example < h1 style= "color:blue;" > This is a Blue Heading < /h1 > Internal Styling (Internal CSS) Internal styling is used to define a style for one HTML page. Internal styling is defined in the <head> section of an HTML page, within a <style> element: Example < !DOCTYPE html > < html > < head > < style > body {background-color:lightgrey;} h1   {color:blue;} p    {color:green;} < /style > < /head > < body > < h1 > This is a heading <
Post a Comment
Read more

HTML Links

-
HTML Links - Hyperlinks HTML links are hyperlinks. A hyperlink is a text or an image you can click on, and jump to another document. HTML Links - Syntax In HTML, links are defined with the <a> tag: < a href= " url " > link text < /a > HTML Links - Colors When you move the mouse over a link, two things will normally happen: The mouse arrow will turn into a little hand The color of the link element will change By default, a link will appear like this (in all browsers): An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red You can change the default colors, by using styles: Example <style> a:link    { color: green; background-color: transparent; text-decoration: none } a:visited { color: pink; background-color: transparent; text-decoration: none } a:hover   { color: red; background-color: transparent; text-decoration: underline } a:active  {
Post a Comment
Read more

HTML Images

-
HTML Images Syntax In HTML, images are defined with the <img> tag. The <img> tag is empty, it contains attributes only, and does not have a closing tag. The src attribute specifies the URL (web address) of the image: < img src= " url " alt= " some_text " > The alt Attribute The alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). If a browser cannot find an image, it will display the alt text: Example < img src= "wrongname.gif" alt= "HTML5 Icon" style= "width:128px;height:128px;" > Image Size - Width and Height You can use the style attribute to specify the width and height of an image. The values are specified in pixels (use px after the
Post a Comment
Read more

HTML Tables

-
Defining HTML Tables   Tables are defined with the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table data with the <td> tag. A table row can also be divided into table headings with the <th> tag.   Example < table style= "width:100%" >   < tr >     < td > Jill < /td >     < td > Smith < /td >     < td > 50 < /td >   < /tr >   < tr >     < td > Eve < /td >     < td > Jackson < /td >     < td > 94 < /td >   < /tr > < /table >
Post a Comment
Read more

HTML Lists

-
Unordered HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles): Example < ul >   < li > Coffee < /li >   < li > Tea < /li >   < li > Milk < /li > < /ul >
Post a Comment
Read more

HTML Block and Inline Elements

-
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. Block-level Elements A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). The <div> element is a block-level element. Examples of block-level elements: <div> <h1> - <h6> <p> <form> Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Examples of inline elements: <span> <a> <img> The <div> Element The <div> element is a block-level element that is often used as a container for other HTML elements. The <div> element has no required attributes, but style and class are common. When used together with CSS, the <div> elemen
Post a Comment
Read more

HTML Iframes

-
Iframe Syntax The syntax for adding an iframe is: < iframe src= " URL " > < /iframe > The src attribute specifies the URL (web address) of the iframe page. Iframe - Set Height and Width Use the height and width attributes to specify the size. The attribute values are specified in pixels by default, but they can also be in percent (like "80%"). Example < iframe src= "demo_iframe.htm" width= "200" height= "200" > < /iframe > Iframe - Remove the Border By default, an iframe has a black border around it. To remove the border, add the style attribute and use the CSS border property: Example < iframe src= "demo_iframe.htm" style= "border:none" > < /iframe > Use iframe as a Target for a Link An iframe can be used as the target frame for a link. The target attribute of the link must refer to the name attribute of the iframe: Example
Post a Comment
Read more

HTML JavaScript

-
JavaScript makes HTML pages more dynamic and interactive. The HTML <script> Tag The <script> tag is used to define a script (JavaScript). The <script> element either contains scripting statements or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. The script below writes Hello JavaScript! into an HTML element with id="demo": Example < script > document.getElementById( "demo" ).innerHTML = "Hello JavaScript!" ; < /script > The HTML <noscript> Tag The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripting. The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML page. The content inside the &l
Post a Comment
Read more

HTML Entities

-
HTML Entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like this: & entity_name ; OR &# entity_number ;  Some Other Useful HTML Character Entities Result Description Entity Name Entity Number non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; ¢ cent &cent; &#162; £ pound &pound; &#163; ¥ yen &yen; &#165; € euro &euro; &#8364; © copyright &copy; &am
Post a Comment
Read more

HTML and XHTML

-
What Is XHTML? XHTML stands for E X tensible H yper T ext M arkup L anguage XHTML is almost identical to HTML XHTML is stricter than HTML XHTML is HTML defined as an XML application XHTML is supported by all major browsers Why XHTML? Many pages on the internet contain "bad" HTML. This HTML code works fine in most browsers (even if it does not follow the HTML rules): < html > < head >   < title > This is bad HTML < /title > < body >   < h1 > Bad HTML   < p > This is a paragraph < /body >
Post a Comment
Read more

What is HTML Canvas?

-
What is HTML Canvas? The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. Canvas Examples A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. The markup looks like this: <canvas id="myCanvas" width="200" height="100"></canvas> Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute: Basic Canvas Example < canvas id= "myCanvas" width= "200" height= "100" style= "border:1px solid #000000;" > < /canvas >
Post a Comment
Read more

HTML5 SVG

-
What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples: Pictures, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. In this chapter you will learn about the different multimedia formats. What is SVG? SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web SVG is a W3C recommendation The HTML <svg> Element The HTML <svg> element (introduced in HTML5) is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images. Example < !DOCTYPE html > < html > < body > < svg width= "100" height= "100" >   < circle cx= "50" cy= "50" r= "40" stroke= "green" stroke-width= "4" fill= "yellow" / > < /svg >
Post a Comment
Read more

HTML5 Video

-
Playing Videos in HTML Before HTML5, there was no standard for showing videos on a web page. Before HTML5, videos could only be played with a plug-in (like flash). The HTML5 <video> element specifies a standard way to embed a video in a web page.  Example < video width= "320" height= "240" controls >   < source src= "movie.mp4" type= "video/mp4" >   < source src= "movie.ogg" type= "video/ogg" > < /video > HTML <video> Autoplay To start a video automatically use the autoplay attribute: Example < video width= "320" height= "240" autoplay >   < source src= "movie.mp4" type= "video/mp4" >   < source src= "movie.ogg" type= "video/ogg" > Your browser does not support the video tag. < /video >
Post a Comment
Read more

HTML YouTube Videos

-
Struggling with Video Formats? Different versions of different browsers support different video formats. Earlier in this tutorial, you have seen that you might have to convert your videos to different video formats to make them play in all browsers. Converting videos to different format can be difficult and time consuming. An easier solution might be to let YouTube play the videos in your web page. YouTube Video Id YouTube will display an id (like XGSy3_Czz8k), when you save (or play) a video. You can use this id, and refer to your video in HTML. Playing a YouTube Video in HTML To play your video on a web page, do the following: Upload the video to YouTube Take a note of the video id Define an <iframe> element in your web page Let the src attribute point to the video URL Use the width and height attributes to specify the dimension of the player Add any other parameters to the URL Example - Using iFrame (the recommended method) < iframe width= &qu
Post a Comment
Read more

HTML5 Local Storage

-
HTML local storage; better than cookies. What is HTML Local Storage? With local storage, web applications can store data locally within the user's browser. Before HTML5, application data had to be stored in cookies, included in every server request. Local storage is more secure, and large amounts of data can be stored locally, without affecting website performance. Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server. Local storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data. HTML Local Storage Objects HTML local storage provides two objects for storing data on the client: window.localStorage - stores data with no expiration date window.sessionStorage - stores data for one session (data is lost when the browser tab is closed) Before using local storage, check browser support for localStorage and sessionStorage: if   ( typeof (Storage
Post a Comment
Read more