2019Spring_04_HTML.pdf - HyperText Markup Language What is HTML \u25cf \u25cf \u25cf \u25cf stands for HyperText Markup Language language using tags to describe web

2019Spring_04_HTML.pdf - HyperText Markup Language What is...

This preview shows page 1 out of 68 pages.

You've reached the end of your free preview.

Want to read all 68 pages?

Unformatted text preview: HyperText Markup Language What is HTML? ● ● ● ● stands for HyperText Markup Language language using tags to describe web pages markup language, not a programming language together with CSS and JavaScript, considered one of the three core technologies of (front-end) web development ● originally specified by Sir Tim Berners Lee, also considered the “inventor” of the web ● standards now provided by the World Wide Web Consortium (W3C) - Hypertext Markup Language ● HyperText is how you move around on the web, by clicking on hyperlinks which bring you to the next page. Hyper means it is not linear, as there is no set order in which to visit links ● Markup is what HTML tags do to the text inside them (e.g. mark it as header, paragraph, etc.) ● Language means that HTML has code-words and syntax like other languages HTML • HTML consists of a series of short codes (tags) typed into a text file by the site author • The text is then saved as an html file, and viewed through a browser like Firefox, Safari, Chrome, and Internet Explorer. • This browser reads the file and renders the text into a visible form • Write HTML using anything from a rudimentary text-editor to a powerful graphical editor A Brief History of HTML • • • • • • • 1990: HTML is introduced 1995: HTML 2 released 1997: HTML 3.2 released 1997: HTML 4 is released 1998: HTML 4 is released (again) 2008: HTML 5 working draft 2014: HTML 5 specification complete HTML Tags • HTML markup tags are usually called HTML tags • Tags are keywords surrounded by angle brackets like <html> • Tags normally come in pairs such as <b> and </b> • The first tag in a pair is the start (opening) tag, the second tag is the end (ending) tag • There are also “empty” tags such as <br/> that don’t require separate start and end tags HTML Elements • An HTML element is everything from the start tag to the end tag: Start tag | Element content | End tag •Here are three examples of HTML elements: <p>This is a paragraph</p> <a href="default.htm">This is a link</a> <br/> HTML Attributes •HTML elements can have attributes. Attributes provide additional information about the element. •Attributes are always specified in the start tag. •They come in name/value pairs like this: name="value" • For example, the link address is provided as an attribute in the anchor (<a>) tag: <a href="link.htm">Link</a> HTML Comments •Comments can be inserted in the HTML code to make it more readable and understandable for someone looking at the code. •Comments are ignored by the browser and are not displayed in the web browser. •Comments are written like this: <!-- This is a comment --> HTML: Head and Body • The code between the <head> and </head> tags doesn't appear on the page. That is a place for special code, lines of metadata •The code between the <body> and </body> tags produces the things we can see; however, even these elements can be made invisible HTML: Meta Tags Meta tags are placed in the header (<head>) to provide “meta-information”, for example <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> HTML Line Breaks •The next tag to appear is the line break <br /> tag after the title of the poem. These tags are called empty tags because they don't have an end tag: This text will be followed by a line break <br/> •This is similar to a “carriage return” HTML: Anchor Links • We can have an “anchor link”, a place in a document that you can 'link' to <a name="top"></a> •At the bottom of the page is a hyperlink to the top of the page. The anchor link is the destination of that hyperlink. Notice that the link at the bottom refers to the anchor link by name. HTML Hyperlinks • Hyperlinks (“links” for short) look like this: <a href="destination">Text that gets linked</a> href is short for hypertext reference. Links can point to other pages on the WWW or to anchor links within the same document. HTML E-mail Link •An e-mail link is special because it doesn't link to a page, rather it tells the browser to behave differently because the destination is an e-mail address: •<a href="mailto:[email protected]">Text</a> •Linking to an e-mail address this way can sometimes annoy a user, as clicking it will open the default mail application on their computer. HTML Images • The image tag is used to instruct the web browser to present a picture on the screen. • The image is stored on a server and is referenced like this: <img src="location_of_graphic_file"/> •The image tag is an empty tag; it doesn't have an end tag. Types of Markup Elements Hypertext markup makes parts of a document into links to other documents. An anchor element creates a hyperlink in the document with the href attribute set to the link URL. For example, the HTML markup, <a href=" ; will render the word "Twitter" as a hyperlink. Types of Markup Elements Structural markup describes the purpose of text. For example, <h2>Golf</h2> establishes "Golf" as a second-level heading. Structural markup does not denote any specific rendering, but most web browsers have default styles for element formatting. Text may be further styled with Cascading Style Sheets (CSS). Types of Markup Elements Presentational markup describes the appearance of the text, regardless of its purpose. For example <b>boldface</b> indicates that visual output devices should render "boldface" in bold text. Text Markup <big> <small> <em> <strong> <sub> <sup> <u> <code> <blockquote> big text small text emphasized text strong text subscripted text superscripted text underlined text computer code text defines a long quotation Text Markup • Some presentation text markup tags are no longer supported in HTML5 • Examples include <big>, <center>, <font>, <tt>, and <ul> • See the “HTML5 Cheat Sheet” (distributed in class) where obsolete tags are marked in orange Table tags • • • • Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag) Each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. Tables Tables <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Table Borders • If you do not specify a border attribute, the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show. • To display a table with borders, one can use the border attribute: <table border="1"> • Best practices today are to handle this not as “inline” styling, but rather via an external stylesheet Table Headings <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> </table> Table Cells <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td></td> </tr> </table> Table Cells • Table cells with no content are not displayed very well in most browsers. • To avoid inconsistent rendering in browsers, add a non-breaking space (&nbsp;) to empty data cells to make the borders visible: <td>&nbsp;</td> Unordered Lists An unordered list is a list of items. The list items are marked with bullets. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Milk</li> </ul> An unordered list: ● Coffee ● Milk Ordered Lists An ordered list is also a list of items – but the list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol> An ordered list: 1. Coffee 2. Milk Definition Lists A Definition List is a list of terms with corresponding definitions. A Definition List starts with the <dl> tag. Each term starts with the <dt> tag, and each definition starts with a <dd> tag. <dl> <dt>Coffee</dt> <dd>drink that helps you stay up during exams</dd> <dt>Milk</dt> <dd>drink that makes you fall asleep during exams</dd> </dl> Forms and Input Tags • HTML Forms are used to select user input. • A form is defined with the <form> tag. • Input - The most used form tag is the <input> tag. The type of input is specified with the type attribute. • Text Fields - Text fields are used when you want the user to type letters, numbers, etc. in a form. <form> First name:<input type="text" name="firstname"/><br/> Last name:<input type="text" name="lastname" /> </form> Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. <form> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female </form> Checkboxes Checkboxes are used when you want the user to select one or more options. <form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike <br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car <br /> <input type="checkbox" name="vehicle" value="Airplane" /> I have an airplane </form> Submit Button • When the user clicks on the "Submit" button, the content of the form is sent to the server. • The form's action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input. <form name="input" action="html_form_submit.asp" method="get"> Username:<input type="text" name="user"/> <input type="submit" value="Submit"/> </form> HTML Colors • HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). • The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF); Hex values are written as 3 double digit numbers, starting with a # sign. • The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors (256 x 256 x 256). • Modern monitors can display at least 16384 different colors. • Subsequent slides show shades of red and shades of gray as well as other color selections. Note how the changing hex codes relate to the changing colors. Color Values HTML5: Validation • The original HTML was never intended to contain tags for formatting a document. HTML tags were intended to define the content of the document like <p> and <h1> • When tags like <font> and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites where fonts and color information had to be added to every single Web page, became a long, expensive and unduly painful process. • In HTML 5 all formatting is removed from the HTML document and stored in a separate style sheet. Because HTML5 separates the presentation from the document structure, we have what we always needed: Total control of presentation layout without messing up the document content. Character Entities • Some characters are reserved in HTML. For example, if you use the less than (<) symbol within your text, your browser could mistake them for markup. • If we want the browser to actually display these characters ,we must insert character entities in the HTML • A character entity looks like &entity_name; or &#entity_number; • To display a less-than sign we must write: &lt; or &#60; • The advantage of using an entity name instead of a number is that the name often is easier to remember. However, the disadvantage is that browsers may not support all entity names, whereas the support for entity numbers is very good. • The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add many spaces to your text, use the &nbsp; character entity. Character Entities HTML5: Overview • HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). • WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to cooperate and create a new version of HTML. • HTML5 is the new standard for HTML, XHTML, and the HTML DOM (document object model). • Modern browsers have HTML5 support HTML5: Ground Rules Some rules for HTML5 were established: • New features should be based on HTML, CSS, DOM, and JavaScript • Reduce the need for external plugins • Better error handling • More markup to replace scripting • HTML5 should be device-independent • Dev process should be visible to the public HTML5: New Features • • • • Canvas element for drawing Video/audio elements for media playback Better support for local offline storage New content specific elements like article, header, footer, header, nav, section • New form controls like calendar, date, time, email, url, search HTML5: DOCTYPE In earlier versions of HTML, the DOCTYPE which comes before the opening <html> tag, was rather involved: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " ; DOCTYPE is much simpler in HTML5 <!DOCTYPE html> HTML5: MIME Types • Every time your web browser requests a page, the web server sends “headers” before it sends the actual page markup. Headers are important, because they tell your browser how to interpret the page markup that follows. • The most important header is called Content-Type, and it looks like Content-Type: text/html • “text/html” is called the “content type” or “MIME type” of the page, where MIMI stands for “Multipurpose Internet Mail Extensions” • Everything has its own MIME types such as images (image/jpeg for JPEG images, image/png for PNG images), JavaScript files, CSS stylesheets, etc. HTML5: DOM and Modernizr • When your browser renders a web page, it constructs a Document Object Model (DOM), a collection of objects that represent the HTML elements on the page. • Every element is represented in the DOM by a different object. • The DOM will tell you which features are supported. • Modernizr is an open source, MIT-licensed JavaScript library that detects support for many HTML5 & CSS3 features. To use it, include the following <script> element <script src="modernizr.min.js"></script> HTML5: Modernizr • Modernizr runs automatically and creates a global object called Modernizr, that contains a set of Boolean properties for each feature it can detect. • For example, if your browser supports the canvas API, the Modernizr.canvas property will be true; otherwise the property will be false. if (Modernizr.canvas) { // let's draw some shapes! } else { // no native canvas support available :( } HTML5: Layout Elements HTML5: Video • • • • HTML5 uses the video element to play video files There are different types of video files An Ogg file works in Firefox, Opera and Chrome. For Safari and future versions of Chrome, we must add an MPEG4 and WebM file. • IE9+ supports video element using MPEG4. • The video element allows multiple source elements. Source elements can link to different video files. The browser will use the first recognized format HTML5: Video <video width="320" height="240" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> Your browser does not support the video tag. </video> HTML5: Video HTML5: Audio • HTML5 uses an audio element to play sound files, or an audio stream. • There are different types of audio files • An Ogg file works in Firefox, Opera and Chrome. • To make the audio work in Safari, the audio file must be of type MP3 or Wav. • IE9+ supports the audio element • The audio element allows multiple source elements. Source elements can link to different audio files. The browser will use the first recognized format. HTML5: Audio <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> HTML5: Canvas • The HTML5 canvas element uses JavaScript to draw graphics on a web page. • A canvas is a rectangular area, and you control every pixel of it. • The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images. • To adding a canvas element to the HTML5 page, • specify the id, width, height of the element <canvas id="myCanvas" width="200" height="100"></canvas> HTML5: Canvas The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript: <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75); </script> HTML5: Input Types HTML5 has several new input types for forms: • email • url • number • range • date pickers • search • color HTML5: Input: Email • The email type is used for input fields that should contain an e-mail address. • The value of the email field is automatically validated when the form is submitted. • Some phone-based browsers recognize the url input type, and changes the on-screen keyboard to match it (add @ and “.com” option) <input type="email" name="user_email" /> HTML5: Input: URL • The url type is used for input fields that should contain a URL address. • The value of the url field is automatically validated when the form is submitted. • Some phone-based browsers recognize the url input type, and changes the on-screen keyboard to match it (add “.com” option) <input type="url" name="user_url"/> HTML5: Input: Number • The number type is used for input fields that should contain a numeric value. • Set restrictions on what numbers are accepted • Can indicate step (increments from min) <input type="number" name="points" min="1" max="10" /> HTML5: Input: Range • The range type is used for input fields that should contain a value from a range of numbers. • The range type is displayed as a slider bar. • One can set restrictions on what numbers are accepted: <input type="range" name="points" min="1" max="10" /> HTML5: Input: Date Pickers HTML5 has new input types for selecting date and time: • date - Selects date, month and year • month - Selects month and year • week - Selects week and year • time - Selects time (hour and minute) • datetime - Selects time, date, month and year • datetime-local - Selects time, date, month and year (local time) HTML5: Input: Search • The search type is used for search fields like a site search or Google search. • The search field behaves like a regular text field. <input type="search" /> HTML5: Input: Color Picker • The color type is used for input fields that should contain a color. • This input type will allow you to select a color from a color picker: <input type="color" name="user_color"/> HTML5: Forms HTML5 has some new elements for forms: • datalist specifies a list of options for an input field • keygen provides a secure way to authenticate users • output used for different types of output, like calculations or script output References • • • • • w3schools.com html5tutorial.info htmlcheatsheet.com RPI HTML workshop ...
View Full Document

  • Fall '19

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes