HTML Fundamentals: Versions, Elements, and Attributes

G. Pullaiah College of Engineering and Technology Department of ComputerScience & Engineering

UNIT-1FUNDAMENTALS • Flavors of HTML • There are many versions of HTML • HTML 2 The basic standard supported by early browsers like Mosaic. • HTML 3.0 A standard that was never widely adopted, as it was developed during the time of heavy browser innovation. • HTML 3.2 A version of the HTML 3.0 specification that adopted many browser-invented elements and removed nonimplemented HTML 3.0 elements. DepartmentofComputerScience & Engineering

Introduction to the Internet • HTML 4.0 Transitional The modern version of HTML, complete with frames, scripting, and style sheet support. This version includes presentational elements. • HTML 4.0 Strict A version of HTML that removes most of the presentational features of the language in favor of CSS-based presentation. • HTML 4.0 Frameset A version of HTMLthat defines support for frames and inline frames. • HTML 4.01 Transitional, Strict, and Frameset A slight bug fix release of the HTML 4 specifications. DepartmentofComputerScience & Engineering

. • HTML Documents : • All 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>. • 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. • <h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3> • HTML Paragraphs : • HTML paragraphs are defined with the <p> tag: • <p>This is a paragraph.</p><p>This is another paragraph.</p> • HTML Links : • HTML links are defined with the <a> tag: • <a href="http://www.w3schools.com">This is a link</a>

HTML Images : • HTML images are defined with the <img> tag. • The source file (src), alternative text (alt), width, and height are provided as attributes : • <img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142"> • 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>

. • 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: • <!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>

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 lang Attribute : • The language of the document can be declared in the <html> tag. • The language is declared with the lang attribute.

<!DOCTYPE html><html lang="en-US"><body>………………..</body></html><!DOCTYPE html><html lang="en-US"><body>………………..</body></html> • The first two letters specify the language (en). If there is a dialect, use two more letters (US). • 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> • The href Attribute : • HTML links are defined with the <a> tag. The link address is specified in the href attribute: • Example • <a href="http://www.w3schools.com">This is a link</a>

Size Attributes : • HTML images are defined with the <img> tag. • The filename of the source (src), and the size of the image (width and height) are all provided as attributes: • Example • <imgsrc="w3schools.jpg" width="104" height="142"> • The image size is specified in pixels: width="104" means 104 screen 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 : • <imgsrc="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

TAGS

HTML BASIC TAGS • Heading tag : • . You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> • Paragaph Tag : • The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening <p> and a closing </p> tag

. • Line Break Tag : • Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. • The <br /> tag has a space between the characters br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break, while if you miss the forward slash character and just use <br> it is not valid in XHTML

. • Centering content : • You can use <center> tag to put any content in the center of the page or any table cell. • Example • <p>This text is not in the center.</p> • <center> • <p>This text is in the center.</p> • </center>

. • Horizontal Line : • Horizontal lines are used to visually break up sections of a document. The <hr> tag creates a line from the current position in the document to the right margin and breaks the line accordingly. • Preserve Formatting : • Sometimes you want your text to follow the exact format of how it is written in the HTML document. In those cases, you can use the preformatted tag <pre>.

Example • <!DOCTYPE html> • <html> • <head> • <title>Preserve Formatting Example</title> • </head> • <body> • <pre> • function testFunction( strText ) • { alert (strText) • } </pre> • </body> </html>

Nonbresking Spaces : • Suppose you want to use the phrase "12 Angry Men." Here you would not want a browser to split the "12, Angry" and "Men" across two lines: • An example of this technique appears in the movie "12 Angry Men."In cases where you do not want the client browser to break text, you should use a nonbreaking space entity instead of a normal space. For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following code:

Example • <!DOCTYPE html> • <html> • <head> • <title>Nonbreaking Spaces Example</title> • </head> • <body> • <p>An example of this technique appears in the movie "12 Angry Men."</p> • </body> </html>

Meta Tag : • Metadata is data (information) about data. • The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. • Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. • The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Browser Support Tips and Notes Note: <meta> tags always go inside the <head> element. Note: Metadata is always passed as name/value pairs. Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined.

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. • The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen. • You should include the following <meta> viewport element in all your web pages: • <meta name="viewport" content="width=device-width, initial-scale=1.0">

Site Structure : • When confronted with a new and complex information system, users build mental models. They use these models to assess relations among topics and to guess where to find things they haven’t seen before. The success of the organization of your web site will be determined largely by how well your site’s information architecture matches your users’ expectations. A logical, consistently named site organization allows users to make successful predictions about where to find things. Consistent methods of organizing and displaying information permit users to extend their knowledge from

familiar pages to unfamiliar ones. If you mislead users with a structure that is neither logical nor predictable, or constantly uses different or ambiguous terms to describe site features, users will be frustrated by the difficulties of getting around and understanding what you have to offer. You don’t want your user’s mental model of your web site to look like figure 3.1.

MULTIMEDIA CONTENT • Multimedia content is the horn of abundance of online content. It bonds writing with images, videos, audio and slideshows in a useful and engaging way. • People are far more likely to engage with and share your stories and posts if they contain images, graphics, audio clips or video presentations. We’re all aware of this. If you’re continually pushing endless strings of dry text against a stark-white screen with maybe one, unrelated, image thrown-in for good measure… well… your reward will undoubtedly match your effort. • Aside from enjoying increased engagement and shares, there are three very powerful reasons you should be including multimedia in everything you produce online.

Multimedia Increases Time on Site: We live in times of fast cars, fast internet speeds, audio books and people with small attention spans. The internet has radically changed the way we think and has dramatically reduced our attention spans. Given this fact, writers, journalists and bloggers have adapted their writing to compensate for this shift in our thinking paradigm. No matter how brilliant you think your piece is, if it’s too long and without multimedia to aid in breaking-up the monotony, you will experience an increased number of Diagonal Readers and lower time spent on your page.

Video clips : • Video clips incorporated in a website are all the rage now. Before the YouTube revolution, video clips had to be downloaded before anyone could see them. With the advances in technology, Internet speeds got a lot faster, which allowed for live video streaming over the net, and YouTube-like sites were born. Today, embedding a video clip in a web page is more than easy, and video clips can be easily shared via your blog, forum or even a small video commercial which you can put on your online store - something, which would cost you a fortune if you had to air it on the television.

Audio : • Audio is another thing, which was affected by the technology advances. And while a video clip will require much more bandwidth and server resources, audio files are much faster to process from a server’s point of view. This helped for their distribution among website creators much faster. Today, a website with a musical background is something more than normal, and on a lot of websites you can easily listen to an audio track, which is uploaded on the web server with the help of a simple player. This has also assisted many independent musicians in promoting their music and has allowed even for the creation of Internet music labels.

Images : • Images were the first type of multimedia to be ever used in a web page. They quickly became an indispensable part of the website design process. Due to the fact that images were pretty small back then, and mostly in the GIF file format, they used very little disk space and bandwidth and were ideal to illustrate every article. This gave birth to the first online news portals, which intended to replace the regular newspapers, offering last minute news without the need to purchase a separate newspaper.

Images in the websites also inspired the creation of image galleries - websites, dedicated specifically to the display of various pictures, painting or photographs. With the introduction of the thumbnails, galleries and website perfected themselves with the ability to offer a small version of the image as a thumbnail, instead of the full picture. • Images became also an important part of the layout of a web page - images could now be used for buttons, navigational menus and backgrounds. Today's images are mostly raster graphics (GIF, JPG, PNG, TIFF), with vector graphics not so widely used, mainly due to browser incompatibility.

cascading style sheets • Advantages of Using CSS : • The biggest advantage of CSS is that it allows separating content of an html document from the style and layout of that document. It can thus make documents much easier to maintain and give much better control over the layout of your web pages, because content of an entire set of HTML pages can be easily controlled using one or more style sheets. • CSS Save lots of time -CSS gives lots of flexibility to set the properties of an element. You can write CSS once; and then the same code can be applied to the groups of HTML elements, and can also be reused in multiple HTML pages.

Easy maintenance -CSS provide an easy means to update document formatting and maintain consistency across multiple documents. By making one change to the website's CSS, elements in all the web pages will be updated automatically. • Pages load faster -CSS enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. It significantly reduces the file transfer size, which results in a faster page loading. • Superior styles to HTML — CSS has much wider presentation capabilities than HTML, so you can give far better look to your HTML pages in comparison to the HTML presentational elements and attributes.

Multiple Device Compatibility — CSS can also allow the HTML document to be optimized for more than one type of device or media. Using CSS the same HTML document can be presented in different viewing styles for different rendering devices such as computer screen, cell phones, printer, etc. • CSS stands for Cascading Style Sheets. • CSS describes how HTML elements are to be displayed on screen, paper, or in other media. • CSS saves a lot of work. It can control the layout of multiple web pages all at once. • CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements • Internal - by using a <style> element in the <head> section • External - by using an external CSS file • The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

Inline CSS : • An inline CSS is used to apply a unique style to a single HTML element. • An inline CSS uses the style attribute of an HTML element. • This example sets the text color of the <h1> element to blue: • Example: • <h1 style="color:blue;">This is a Blue Heading</h1>

Internal CSS • An internal CSS is used to define a style for a single HTML page. • An internal CSS is defined in the <head> section of an HTML page, within a <style> element: • Example

<!DOCTYPE html><html><head><style>body {background-color: powderblue;}h1 {color: blue;}p {color: red;}</style></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

External CSS: • An external style sheet is used to define the style for many HTML pages. • With an external style sheet, you can change the look of an entire web site, by changing one file! • To use an external style sheet, add a link to it in the <head> section of the HTML page:

<!DOCTYPE html><html><head> <link rel="stylesheet" href="styles.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

CSS Fonts : • The CSS color property defines the text color to be used. • The CSS font-family property defines the font to be used. • The CSS font-size property defines the text size to be used. • EXAMPLE : • <!DOCTYPE html><html><head><style>

h1 { color: blue; font-family: verdana; font-size: 300%;}p { color: red; font-family: courier; font-size: 160%;}</style></head><body>

<h1>This is a heading</h1><p>This is a paragraph.</p></body></html>

HTML Fundamentals: Versions, Elements, and Attributes