HTML.pdf

HyperText Markup Language Lesson 1: The language of the Web The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo:  The Web killed the radio star ❖ Want to get an idea out there? Sell something? ❖ Just need a creative outlet? ❖ Turn to...

HyperText Markup Language Lesson 1: The language of the Web The only thing that is standing between you and getting yourself on the Web is learning to speak the lingo:  The Web killed the radio star ❖ Want to get an idea out there? Sell something? ❖ Just need a creative outlet? ❖ Turn to the Web—we don’t need to tell you it has become the universal form of communication. ❖ Even better, it’s a form of communication YOU can participate in. ❖ But if you really want to use the Web effectively, you’ve got to know a few things about HTML—not to mention, a few things about how the Web works too.  What does the web server ❖ do? Web servers have a full-time job on the Internet, tirelessly waiting for requests from web browsers. ❖ What kinds of requests? Requests for web pages, images, sounds, or maybe even a video. ❖ When a server gets a request for any of these resources, the server finds the resource, and then sends it back to the browser.  What does the web browser do? ❖ You already know how a browser works: you’re surfing around the Web and you click on a link to visit a page. ❖ That click causes your browser to request an HTML page from a web server, retrieve it, and display the page in your browser window. ❖ But how does the browser know how to display a page? That’s where HTML comes in. ❖ HTML tells the browser all about the content and structure of the page.  So, you know HTML is the key to getting a browser to display your pages, but what exactly does HTML look like? And what does it do? Let’s have a look at a little HTML…imagine you’re going to create a web page to advertise the Head First Lounge, a local hangout with some good tunes, refreshing elixirs, and wireless access  HTML-5 Overview ❏ HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. ❏ HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). ❏ The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.  Browser Support ❏ The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. ❏ The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.  New Features ❏ New Semantic Elements − These are like , , and. ❏ Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for tag. ❏ Persistent Local Storage − To achieve without resorting to third-party plugins. ❏ WebSocket − A next-generation bidirectional communication technology for web applications.  New Features ❏ Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). ❏ Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript. ❏ Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins. ❏ Geolocation − Now visitors can choose to share their physical location with your web application.  New Features ❏ Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. ❏ Drag and drop − Drag and drop the items from one location to another location on the same webpage.  Backward Compatibility HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. Its new features have been built on existing features and allow you to provide fallback content for older browsers. It is suggested to detect support for individual HTML5 features using a few lines of JavaScript. If you are not familiar with any previous version of HTML, I would recommend that you go through our HTML Tutorial before exploring the features of HTML5.  HTML-5 Syntax ❏ The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4. ❏ HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes, an attribute had to have a value and to close all empty elements. HTML5 comes with a lot of flexibility and it supports the following features − Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional.  The DOCTYPE ❏ DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD. ❏ HTML 5 authors would use simple syntax to specify DOCTYPE as follows − The above syntax is case-insensitive.  Character Encoding HTML 5 authors can use simple syntax to specify Character Encoding as follows − The above syntax is case-insensitive.  The tag It's common practice to add a type attribute with a value of "text/javascript" to script elements as follows − HTML 5 removes extra information required and you can use simply following syntax −  The tag So far you were writing as follows − HTML 5 removes extra information required and you can simply use the following syntax −  HTML-5 Elements ❖ Are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between. ❖ The difference between start tags and end tags is that the latter includes a slash before the tag name. ❖ Following is the example of an HTML5 element − HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase. Most of the elements contain some content like... contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link, meta, etc.  HTML-5 Attributes An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts − a name and a value The name is the property you want to set. For example, the paragraph element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.  HTML-5 Attributes ❖ Are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between. ❖ The difference between start tags and end tags is that the latter includes a slash before the tag name. ❖ Following is the example of an HTML5 element −  Comments ❖ Comment is a piece of code which is ignored by any web browser. ❖ It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. ❖ Comments help you and others understand your code and increases code readability. ❖ HTML comments are placed in between tags. ❖ So, any content placed with-in tags will be treated as comment and will be completely ignored by the browser.  HTML- Images ❖ Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. INSERT IMAGE ❖ You can insert any image in your web page by using tag. Following is the simple syntax to use this tag. ❖ The tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.  HTML- Images ❖ Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. SET IMAGE WIDTH / HEIGHT ❖ You can set image width and height based on your requirement using width and height attributes. ❖ You can specify width and height of the image in terms of either pixels or percentage of its actual size.  HTML- Images ❖ Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. SET IMAGE BORDER ❖ By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. ❖ A thickness of 0 means, no border around the picture.  HTML- Images ❖ Images are very important to beautify as well as to depict many complex concepts in simple way on your web page. SET IMAGE ALIGNMENT ❖ By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.  HTML- Lists ❖ HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain − − An unordered list. This will list items using plain bullets. − An ordered list. This will use different schemes of numbers to list your items. − A definition list. This arranges your items in the same way as they are arranged in a dictionary.  HTML- Unordered Lists ❖ An unordered list is a collection of related items that have no special order or sequence. ❖ This list is created by using HTML tag. Each item in the list is marked with a bullet.  The type Attribute ❖ You can use type attribute for tag to specify the type of bullet you like. By default, it is a disc. ❖ Following are the possible options −  HTML- Ordered Lists ❖ If you are required to put your items in a numbered list instead of bulleted, then HTML ordered list will be used. ❖ This list is created by using tag. ❖ The numbering starts at one and is incremented by one for each successive ordered list element tagged with.  The type Attribute ❖ You can use type attribute for tag to specify the type of numbering you like. By default, it is a number. ❖ Following are the possible options − - Default-Case Numerals. - Upper-Case Numerals. - Lower-Case Numerals. - Upper-Case Letters. - Lower-Case Letters.  The start Attribute ❖ You can use start attribute for tag to specify the starting point of numbering you need. ❖ Following are the possible options − - Numerals starts with 4. - Numerals starts with IV. - Numerals starts with iv. - Letters starts with d. - Letters starts with D.  HTML Definition Lists ❖ HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. ❖ The definition list is the ideal way to present a glossary, list of terms, or other name/value list. ❖ Definition List makes use of following three tags. − Defines the start of the list − A term − Term definition − Defines the end of the list  HTML Text Links ❖ A web page can contain various links that take you directly to other pages and even specific parts of a given page. ❖ These links are known as hyperlinks. ❖ Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and images. ❖ Thus you can create hyperlinks using text or images available on a webpage.  Linking Documents A link is specified using HTML tag. This tag is called anchor tag and anything between the opening tag and the closing tag becomes part of the link and a user can click that part to reach to the linked document. Following is the simple syntax to use tag. Link Text  The target Attribute ❖ We have used target attribute in our previous example. ❖ This attribute is used to specify the location where linked document is opened. Following are the possible options −  Option Description _blank Opens the linked document in a new window or tab. _self Opens the linked document in the same frame. _parent Opens the linked document in the parent frame. _top Opens the linked document in a named targetframe. targetframe Opens the linked document in a named targetframe.  Use of Base Path ❖ When you link HTML documents related to the same website, it is not required to give a complete URL for every link. ❖ You can get rid of it if you use tag in your HTML document header. ❖ This tag is used to give a base path for all the links. ❖ So your browser will concatenate given relative path to this base path and will make a complete URL.  Linking to a Page Section ❖ You can create a link to a particular section of a given webpage by using name attribute. ❖ This is a two-step process. ❖ Note − The name attribute deprecated in HTML5. Do not use this attribute. Use id and title attribute instead. ❖ First create a link to the place where you want to reach with-in a webpage and name it using tag as follows − HTML Text Links  Linking to a Page Section ❖ Second step is to create a hyperlink to link the document and place where you want to reach − Go to the Top ❖ This will produce following link, where you can click on the link generated Go to the Top to reach to the top of the HTML Text Link tutorial. Go to the Top  Setting Link Colors ❖ You can set colors of your links, active links and visited links using link, alink and vlink attributes of tag. ❖ Example Save the following in test.htm and open it in any web browser to see how link, alink and vlink attributes work.  Download Links ❖ You can create text link to make your PDF, or DOC or ZIP files downloadable. ❖ This is very simple; you just need to give complete URL of the downloadable file as follows −  Image Links ❖ Make sure to save the image/s in the same folder.  Email Links ❖ HTML Email Tag HTML tag provides you option to specify an email address to send an email. While using tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http. Default Settings  HTML Backgrounds ❖ By default, your web page background is white in color. ❖ You may not like it, but no worries. ❖ HTML provides you following two good ways to decorate your web page background. HTML Background with Colors HTML Background with Images  Patterned & Transparent Backgrounds ❖ You might have seen many pattern or transparent backgrounds on various websites. ❖ This simply can be achieved by using patterned image or transparent image in the background. ❖ It is suggested that while creating patterns or transparent GIF or PNG images, use the smallest dimensions possible even as small as 1x1 to avoid slow loading.  HTML Colors Colors are very important to give a good look and feel to your website. You can specify colors on page level using tag or you can set colors for individual tags using bgcolor attribute.  Attributes ❖ bgcolor − sets a color for the background of the page. ❖ text − sets a color for the body text. ❖ alink − sets a color for active links or selected links. ❖ link − sets a color for linked text. ❖ vlink − sets a color for visited links − that is, for linked text that you have already clicked on. HTML Colors Coding Methods Colors are very important to give a good look and feel to your website. You can specify colors on page level using tag or you can set colors for individual tags using bgcolor attribute.  HTML Colors Names https://www.w3schools.com/colors/colors_picker.asp T H A NKS