Web Application Programming with HTML 5 part 1

UNDERSTANDIN G HTML STRUCTURES AND DIFFERENT IDEs Web Applications

Objectives 2 ▰At the end of the chapter, students are expected to: ▻a. Understand the HTML language and its structure. ▻b. Use HTML tags to write HTML files and format HTML files and understand the components of web page. ▻c. Learn the different IDEs that are commonly used for website creation.

Content HTML Presentation CSS Structure HTML 3 Behavior Javascript What makes up a webpage?

What makes up a webpage? 4 The makeup of a webpage could be viewed as a combination of the following four elements: • Contents - the collective term for all the browser-displayable information elements such as text, audio, still images, animation, video, multimedia, and files (e.g., Word, PowerPoint, PDF, etc.) of web pages. Content does not require any additional presentational markups or styles in order to fully convey its message. • Structure - refers to the practice of using HTML on content to convey meaning(semantics) and to describe how blocks of information are structured to one another. Examples: "this is a list" (ol, ul, li), "this is headings and subheadings" (<h1>, <h2>, ..., <h6>), "this section is related to" (<a>), etc.. • Presentation - (or Style) refers to anything related to how the content and structure is presented. Examples: size, color, margins, borders, layout, location, etc. • Behavior - (or Interactivity) refers to the employment of client-side script (e.g., JavaScript) to create interactivity between the webpage and its users

What is HTML? 5  HTML stands for Hyper Text Markup Language  HTML is a language for creating web pages  HTML is not a programming language.  It is a markup language  A markup language is a set of markup tags  The markup tags describe how text should be displayed  Purpose of HTML Language is to create static web sites

Tags in HTML 6 Tags in HTML: Tags are one of the most important part in an HTML Document. HTML uses some predefined tags which tells the browser about content display property, that is how to display a particular given content. For Example, to create a paragraph, one must use the paragraph tags(<p> </p>) and to insert an image one must use the img tags(<img />). There are generally two types of tags in HTML: Paired Tags: These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags. Singular Tags: These tags do not required to be closed.

Example of HTML tags 7 <b> AGUSTIN <b> content start tag end tag tag name Element

Basic HTML document structure 8 <!DOCTYPE html> <html> <head> * * </head> <body> * * </body> </html>

!Doctype 9 All HTML documents must start with a <!DOCTYPE> declaration. The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

HTML element 10 The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

Title element 11 The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> tag is required in HTML documents! The contents of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results. The <title> element: defines a title in the browser toolbar provides a title for the page when it is added to favorites displays a title for the page in search-engine results Here are some tips for creating good titles: Go for a longer, descriptive title (avoid one- or two-word titles) Search engines will display about 50-60 characters of the title, so try not to have titles longer than that Do not use just a list of words as the title (this may reduce the page's position in search results)

Head element 12 The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. Metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information. The following elements can go inside the <head> element: <title> (required in every HTML document) <style> <base> <link> <meta> <script> <noscript>

Body element 13 The <body> tag defines the document's body. The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. Note: There can only be one <body> element in an HTML document.

Text Editors 14 • Aptana Studio 3 (Cross-Platform) • Brackets 1.0(Cross-Platform) • Notepad++(Windows) • TextMate (Mac) • Notepad • Visual StudioCode

Common coding errors 22 • An opening tag without a closing tag. • Misspelled tag or attribute names. • Quotation marks that aren’t paired. • Incorrect file references in link, img, or <a> elements.

How to run a web page stored on your computer? 23 • Start your browser, and use the File Open or Open File command to open the file. Or, type the  complete path and filename into the address bar, and press Enter. • Use the file explorer on your system to find the HTML file, and double-click on it. • If you’re using Aptana, select the HTML file in the App Explorer and click the Run button to open the file in the most recently used browser. If you’re using another text editor or IDE, look for a similar button or command.

Validator 24 • How to use the W3C Markup Validation Service • Go to the URL that follows, identify the file to be validated, and click the Check button: • http://validator.w3.org/

Web Application Programming with HTML 5 part 1

More Related Content

Similar to Web Application Programming with HTML 5 part 1

Recently uploaded

Web Application Programming with HTML 5 part 1