HTML5 Basics.

Slides:



Advertisements
Similar presentations
Introduction to HTML5. History of HTML HTML first published HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0 HTML
Advertisements

HTML Basics Customizing your site using the basics of HTML.
XHTML Basics. What is XHTML? XHTML is newer than the old HTML XHTML has stricter rules and does not allow some elements formerly used in HTML One benefit.
XHTML Basics.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Introducing HTML & XHTML:. Goals  Understand hyperlinking  Understand how tags are formed and used.  Understand HTML as a markup language  Understand.
Basics of HTML Shashanka Rao. Learning Objectives 1. HTML Overview 2. Head, Body, Title and Meta Elements 3.Heading, Paragraph Elements and Special Characters.
Creating a Simple Page: HTML Overview
Creating a Basic Web Page
ULI101 – XHTML Basics (Part II) What is Markup Language? XHTML vs. HTML General XHTML Rules Block Level XHTML Tags XHTML Validation.
HTML Structure & syntax
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Tutorial 1 Developing a Basic Web Page. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives – Lesson 1 Introduction to the.
Essential Tags Web Design – Sec 3-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Introduction to HTML5. History of HTML HTML first published – Tim Berners-Lee HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 XHTML 2.0.
Using Html Basics, Text and Links. Objectives  Develop a web page using HTML codes according to specifications and verify that it works prior to submitting.
Learning Web Design: Chapter 4. HTML  Hypertext Markup Language (HTML)  Uses tags to tell the browser the start and end of a certain kind of formatting.
HTML. WHAT IS HTML HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of.
Creating Webpage Using HTML
HTML Structure & syntax. Introduction This presentation introduces the following: Doctype declaration HTML Tags, Elements and Attributes Sections of a.
HTML: Hyptertext Markup Language Doman’s Sections.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 2 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
XHTML Basics. What is XHTML? XHTML is newer than, but built upon, the original HTML (Hyper Text Markup Language) platform. XHTML has stricter rules and.
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML.
HTML Structure & syntax
HTML Structure & syntax
Getting Started with HTML
Pertemuan 1 Desain web Pertemuan 1
Getting Started With HTML
Online PD Basic HTML The Magic Of Web Pages
Introduction to HTML5.
Essential Tags Web Design – Sec 3-3
Introduction to HTML.
HTML.
Uppingham Community College
Coding, Testing and Valdating a Web Page
Introduction to HTML5.
XHTML Basics.
Basic HTML PowerPoint How Hyper Text Markup Language Works
Web Development & Design Foundations with HTML5 8th Edition
Essential Tags Web Design – Sec 3-3
Introduction to HTML5.
Basic HTML PowerPoint How Hyper Text Markup Language Works
XHTML Basics.
XHTML Basics.
Introducing HTML & XHTML:
Digital Design – Copyright Law
Intro to Web Development Links
Intro to Web Development First Web Page
Structuring Content in a Web Document
HTML Structure.
XHTML Basics.
Introduction to HTML5.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Web Application Development
Pertemuan 1 Desain web Pertemuan 1
HyperText Markup Language
The Most Basic HTML Page
An Introduction to HTML Pages
XHTML Basics.
HTML Structure & syntax
Introduction to HTML5.
Web Programming and Design
HTML Introduction.
Getting Started With Web Page Creation Using HTML
HTML5 and CSS3 Illustrated Unit B: Getting Started with HTML
Presentation transcript:

HTML5 Basics

History of HTML HTML first published 1991 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards. HTML 2.0 1995 HTML 3.2 1997 XHTML 2.0 had very strict standards but was abandoned in 2009 in favor of HTML5. HTML 4.01 1999 XHTML 1.0 2000 HTML5 is much more tolerant and can handle markup from all prior versions. A working draft was released in 2012 and the platform was finalized in 2014. 2002 -2009 XHTML 2.0 HTML5 HTML5.1 was finalized in November 2016. 2012 HTML5.1 2014 HTML5.2 is currently under development and expected to be finalized in late 2017. HTML5.2 2016

What is HTML5? HTML5 is a language used to create and organize webpages: HTML5 is newer than, but built upon, the original HTML (HyperText Markup Language) platform. It incorporates all features from earlier versions of HTML, including the stricter XHTML. It adds a diverse set of new tools for the web developer to use. All modern browsers have full HTML5 support

Goals of HTML5 Support all existing web pages. With HTML5, there is no requirement to go back and revise older websites. Reduce the need for external plugins and scripts to show website content. Improve the semantic definition (i.e. meaning and purpose) of page elements. Make the rendering of web content universal and independent of the device being used. Handle web documents errors in a better and more consistent fashion.

What is a Web Page? A web page is a file on a computer, just like any other file: Web pages are plain text documents saved with the ".html" file extension. These HTML files can be opened in two different ways. If we open them using a text editor, such as Notepad, we see the HTML code. If we open them in a web browser (such as Microsoft Edge, Chrome, Safari, Opera or Firefox), the browser processes the code and displays the content in the browser window as a web page.

Creating a Web Document To create a new web document, we can type it directly into a text editor, such as Notepad, and then save it with a ".html" extension: Never use Microsoft Word or other word processing applications to create or edit web documents. These programs add extra characters to the file which can interfere with the web page displaying correctly.

Basic HTML5 Document In this course, we will demonstrate HTML5 documents with yellow code windows. Some code might be highlighted for discussion purposes: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Page Title Goes Here </title> </head> <body> <!-- Page content goes here --> </body> </html> This document contains all the essential components of a functional web page. It can be copied and then modified to begin building a new web page. From now on, we'll refer to this template as the skeleton file. We'll start having fun designing our own web pages very soon, but first we have to go over a few basic components of this skeleton page, beginning with the DOCTYPE.

First Look at HTML5 In HTML5, there is just one possible DOCTYPE declaration and it is simple: <!DOCTYPE html> The DOCTYPE tells the browser which type and version of document to expect. This should be the last time the DOCTYPE is ever changed. From now on, all future versions of HTML will use this same simplified declaration. This is what the <html> element looks like in HTML5: <html lang="en"> The lang attribute in the <html> element declares which language the page content is in. Though not strictly required, it should always be specified, as it can assist search engines and screen readers. Each of the world’s major languages has a two-character code, e.g. Spanish = "es", French = "fr", German = "de", Chinese = "zh", Arabic = "ar".

The <head> and <body> Elements Here are the typical HTML 5 <head> and <body> sections: <head> <meta charset="utf-8"> <title>My First HTML5 Page</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Page content goes here --> </body> The <head> element surrounds all the special “behind the scenes” elements of a web document. Most of these elements do not get displayed directly on the web page. The <body> element surrounds all the actual content (text, images, videos, links, etc.) that will be displayed on our web page. Just as with a person, the head always belongs on top of the body.

The <meta> Element Immediately after the <head> line, we place this <meta> element: <head> <meta charset="utf-8"> <title>Page Title Goes Here</title> </head> The <meta> element provides information about the document to web browsers and search engines. This line declares that the document is encoded in the UTF-8 (Unicode) character set. The UTF-8 character set is the dominant choice for documents on the internet. We will use it for all our web pages. There can be multiple <meta> lines in the same web page. The <meta> element is often used to provide additional information such as page keywords, a page description, and the author(s) of a web document.

The <title> Element The <title> element defines what text will show in the web browser's title bar: <head> <meta charset="utf-8"> <title>Page Title Goes Here</title> </head> The <title> element is always placed within the <head> section of the document. Each page of your website should have a unique title. Every web document must include one and only one instance of DOCTYPE, <html>, <head>, <body>, and <title>.

Opening and Closing Tags A tag is an HTML "command" that tells the browser to perform some action: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Page Title Goes Here </title> </head> <body> <!-- Page content goes here --> </body> </html> In HTML, most elements must have both an opening tag (shown in green) and a closing tag (shown in red). The closing tags begin with a forward slash. The <meta> element is unusual in that it is a self-closing element. We'll see more examples of this element type in the next lesson. The HTML tags that surround the actual content of a page are collectively known as markup. Markup is not visible when the page is viewed in a browser.

Nesting Elements When we write HTML code, we must take care that elements are properly nested: <head> <meta charset="utf-8"> <title> Page Title Goes Here </title> </head> <body> <!-- Page content goes here --> </body> Nesting means that an element is completely contained within another element. In these lines of code, the <meta> and <title> elements are nested within the <head> element.

Nesting Error Example One of the most common errors committed by beginning web designers is to overlap HTML elements, resulting in a nesting error: <head> <meta charset="utf-8"> <title> Page Title Goes Here </head> </title> In the above example, the <head> element was closed before the <title> element was closed. A nesting error like this can cause serious problems when the web page is displayed in a browser. Later in the course, we will use a "validation" tool that will hunt down and locate these types of mistakes for us, prior to our publishing a web page.

Line Breaks and Spaces Browsers ignore line breaks and spaces. We can take advantage of this fact by placing blank lines and indents in our code to make it easier to organize and read: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> Page Title Goes Here </title> </head> <body> <!-- Page content goes here --> </body> </html> We will standardize on using two spaces for each level of indenting.

Basic HTML5 Web Page Putting the prior sections together, and now adding closing tags, we have our first complete web page in HTML5: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> My First HTML5 Page </title> <link rel="stylesheet" href="style.css"> </head> <body> HTML5 is fun! </body> </html> Let's open this page in a web browser to see how it looks…

Viewing the HTML5 Web Page Even though we used HTML5, the page looks exactly the same in a web browser as it would in earlier versions of HTML. Without looking at the source code, web visitors will not know which version of HTML the page is in.