Module1.pdf

‭LEA‬ L‭ EARNING MODULE NO. 1‬ ‭Title‬ ‭1. HTML5 and CSS3‬ T‭ opic‬ ‭.1 HTML5 Elements, HTML5 Forms, CSS3‬ 1 ‭Time Frame‬ ‭10 hrs.‬ ‭Introduction‬ ‭This module will introdu...

‭LEA‬ L‭ EARNING MODULE NO. 1‬ ‭Title‬ ‭1. HTML5 and CSS3‬ T‭ opic‬ ‭.1 HTML5 Elements, HTML5 Forms, CSS3‬ 1 ‭Time Frame‬ ‭10 hrs.‬ ‭Introduction‬ ‭This module will introduce some basic terminology and lay the groundwork‬ ‭for the course. Discussion on the introduction of HTML5 and its basic‬ ‭applications with CSS3 structures.‬ ‭Objectives‬ ‭At the end of this session, the students will be able to:‬ ‭1.‬ ‭Explain concept of designing a web page‬ ‭2.‬ ‭Familiarize the basics of HTML5.‬ ‭3.‬ ‭Describe the HTML page structure.‬ ‭4.‬ ‭Familiarize the basics of CSS3‬ L‭ earning Activities‬ ‭HTML is the standard markup language for Web pages.‬ ‭With HTML you can create your own Website.‬ ‭ hat is HTML?‬ W ‭HTML stands for Hyper Text Markup Language‬ ‭HTML is the standard markup language for creating Web pages‬ ‭HTML describes the structure of a Web page‬ ‭HTML consists of a series of elements‬ ‭HTML elements tell the browser how to display the content‬ ‭HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link",‬ ‭etc.‬ ‭A Simple HTML Document‬ ‬ ‭ ‬ ‭ ‬ ‭ ‭ ‭P ‬age Title‬ ‬ ‭ ‬ ‭ ‬ ‭ ‭‬ ‬ ‭ My First Heading‬ ‭ ‬ ‭ ‭ ‭M ‬y first paragraph.‬ ‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭Example Explained‬ ‭‬ ‭The ‭ ‬ !DOCTYPE html>‬ < ‭declaration defines that this‬‭document is an HTML5‬ ‭document‬ ‭‬ T ‭ he ‭ ‬ html>‬ < ‭element is the root element of an HTML‬‭page‬ ‭‬ ‭The ‭ ‬ head>‬ < ‭element contains meta information about‬‭the HTML page‬ ‭‬ ‭The ‬ ‭ ‭element specifies a title for the HTML‬‭page (which is shown in‬ ‭the browser's title bar or in the page's tab)‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 1‬ ‭LEA‬ ‭‬ ‭The ‭ ‬ body>‬ < ‭element defines the document's body, and‬‭is a container for all‬ t‭ he visible contents, such as headings, paragraphs, images, hyperlinks,‬ ‭tables, lists, etc.‬ ‭‬ ‭The ‭ ‬ h1>‬ < ‭element defines a large heading‬ ‭ ‬ ‭The ‭ ‬ p>‬ < ‭element defines a paragraph‬ ‭What is an HTML Element?‬ ‭ n HTML element is defined by a start tag, some content, and an end tag:‬ A ‭‭C ‬ ontent goes here...‬‭‬ ‭The HTML ‬‭element‬‭is everything from the start tag‬‭to the end tag:‬ ‭‭M ‬ y First Heading‬‭‬ ‭ ‬ ‬‭My first paragraph.‬‭‬ ‭Web Browsers‬ ‭ he purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML‬ T ‭documents and display them correctly.‬ ‭A browser does not display the HTML tags, but uses them to determine how to‬ ‭display the document:‬ ‭HTML Page Structure‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 2‬ ‭LEA‬ ‭Below is a visualization of an HTML page structure:‬ ‭HTML History‬ ‭ ince the early days of the World Wide Web, there have been many versions of‬ S ‭HTML:‬ ‭Yea‬ ‭Version‬ ‭r‬ ‭198‬ ‭Tim Berners-Lee invented www‬ ‭9‬ ‭199‬ ‭Tim Berners-Lee invented HTML‬ ‭1‬ ‭199‬ ‭Dave Raggett drafted HTML+‬ ‭3‬ ‭199‬ ‭HTML Working Group defined HTML 2.0‬ ‭5‬ ‭199‬ ‭W3C Recommendation: HTML 3.2‬ ‭7‬ ‭199‬ ‭W3C Recommendation: HTML 4.01‬ ‭9‬ ‭200‬ ‭W3C Recommendation: XHTML 1.0‬ ‭0‬ ‭200‬ ‭WHATWG HTML5 First Public Draft‬ ‭8‬ ‭201‬ ‭WHATWG HTML5 Living Standard‬ ‭2‬ ‭201‬ ‭W3C Recommendation: HTML5‬ ‭4‬ ‭201‬ ‭W3C Candidate Recommendation: HTML 5.1‬ ‭6‬ ‭201‬ ‭W3C Recommendation: HTML5.1 2nd‬ ‭7‬ ‭Edition‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 3‬ ‭LEA‬ ‭201‬ ‭W3C Recommendation: HTML5.2‬ ‭7‬ ‭HTML Editors‬ ‭A simple text editor is all you need to learn HTML.‬ ‭Learn HTML Using Notepad or TextEdit‬ ‭ eb pages can be created and modified by using professional HTML editors.‬ W ‭However, for learning HTML we recommend a simple text editor like Notepad (PC)‬ ‭or TextEdit (Mac).‬ ‭We believe in that using a simple text editor is a good way to learn HTML.‬ ‭Follow the steps below to create your first web page with Notepad or TextEdit.‬ ‭Step 1: Open Notepad (PC)‬ ‭Windows 8 or later:‬ ‭ pen the ‬‭Start Screen‬‭(the window symbol at the bottom‬‭left on your screen).‬ O ‭Type ‬‭Notepad‬‭.‬ ‭Windows 7 or earlier:‬ ‭Open ‭S ‬ tart‬‭>‬‭Programs >‬‭‭A ‬ ccessories >‬‭‭N ‬ otepad‬ ‭Step 1: Open TextEdit (Mac)‬ ‭Open ‭F ‬ inder > Applications > TextEdit‬ ‭ lso change some preferences to get the application to save files‬ A ‭correctly. In ‬‭Preferences > Format > ‭c ‬ hoose‬‭"Plain‬‭Text"‬ ‭ hen under "Open and Save", check the box that says "Display HTML files as HTML‬ T ‭code instead of formatted text".‬ ‭Then open a new document to place the code.‬ ‭Step 2: Write Some HTML‬ ‭Write or copy the following HTML code into Notepad:‬ ‭‬ ‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 4‬ ‭LEA‬ ‬ ‭ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭Step 3: Save the HTML Page‬ ‭Save the file on your computer. Select ‭F ‬ ile > Save‬‭as‬‭in the Notepad menu.‬ ‭ ame the file ‬‭"index.htm"‬‭and set the encoding to ‬‭UTF-8‬‭(which‬‭is the preferred‬ N ‭encoding for HTML files).‬ ‭ ip:‬‭You can use either.htm or.html as file extension.‬‭There is no difference, it is‬ T ‭up to you.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 5‬ ‭LEA‬ ‭Step 4: View the HTML Page in Your Browser‬ ‭ pen the saved HTML file in your favorite browser (double click on the file, or‬ O ‭right-click - and choose "Open with").‬ ‭The result will look much like this:‬ ‭W3Schools Online Editor - "Try it Yourself"‬ ‭ ith our free online editor, you can edit the HTML code and view the result in your‬ W ‭browser.‬ I‭ t is the perfect tool when you want to ‬‭test‬‭code‬‭fast. It also has color coding and‬ ‭the ability to save and share code with others:‬ ‭Example‬ ‭‬ ‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭Page Title‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ ‭‬ ‬ ‭This is a Heading‬ ‭ ‬ ‭ ‬ ‭This is a paragraph.‬ ‭ ‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭https://www.w3schools.com/html/html_editors.asp‬ ‭HTML Basic Examples‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 6‬ ‭LEA‬ ‭HTML Documents‬ ‭ ll HTML documents must start with a document type declaration: ‭ A ‬ !DOCTYPE html>‬ < ‭.‬ ‭The HTML document itself begins with ‭‬ html>‬ < ‭and ends‬‭with ‭ ‬ /html>‬ < ‭.‬ ‭The visible part of the HTML document is between ‭ ‬ body>‬ < ‭and ‬‭‬ ‭.‬ ‭Example‬ ‭‬ ‬ ‭ ‬ ‭ ‬ ‭ ‭‬ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭The Declaration‬ ‭ he ‬‭ T ‭declaration represents the document‬‭type, and helps browsers to‬ ‬ ‭display web pages correctly.‬ ‭It must only appear once, at the top of the page (before any HTML tags).‬ ‭The ‬‭ ‭declaration is not case sensitive.‬ ‬ ‭The ‬‭ ‭declaration for HTML5 is:‬ ‬ ‬ ‭ ‭HTML Headings‬ ‭ TML headings are defined with the ‬‭ H ‭to ‬‭ ‬ ‭tags.‬ ‬ ‬ ‭ ‭defines the most important heading. ‬‭ ‬‭defines‬‭the least important‬ ‭heading: ‬ ‭Example‬ ‭‬ ‬ ‭This is heading 1‬ ‭ ‬ ‭ ‬ ‭This is heading 2‬ ‭ ‬ ‭ ‬ ‭This is heading 3‬ ‭ ‬ ‭ ‭HTML Paragraphs‬ ‭HTML paragraphs are defined with the ‭ ‬ p>‬ < ‭tag:‬ ‭Example‬ ‭‬ ‬ ‭This is a paragraph.‬ ‭ ‬ ‭ ‬ ‭This is another paragraph.‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 7‬ ‭LEA‬ ‭HTML Links‬ ‭HTML links are defined with the ‬‭ ‭tag:‬ ‬ ‭Example‬ ‭‬ < a‬ ‭‭href‬="https://www.w3schools.com">‬ ‭ This is a link‬ ‭ ‬ ‭ ‭The link's destination is specified in the ‭ ‬ ref‬ h ‭attribute. ‬ ‭Attributes are used to provide additional information about HTML elements.‬ ‭You will learn more about attributes in the succeeding module.‬ ‭HTML Images‬ ‭ TML images are defined with the ‬‭ H ‬ ‭tag.‬ ‭The source file (‬‭ ‭), alternative text (‬‭ src‬ alt‬‭), ‬‭ ‭,‬‭and ‭ width‬ ‬ eight‬ h ‭are provided as‬ ‭attributes:‬ ‭Example‬ ‬ ‭ ‭How to View HTML Source?‬ ‭Have you ever seen a Web page and wondered "Hey! How did they do that?"‬ ‭View HTML Source Code:‬ ‭ ight-click in an HTML page and select "View Page Source" (in Chrome) or "View‬ R ‭Source" (in Edge), or similar in other browsers. This will open a window containing‬ ‭the HTML source code of the page.‬ ‭Inspect an HTML Element:‬ ‭ ight-click on an element (or a blank area), and choose "Inspect" or "Inspect‬ R ‭Element" to see what elements are made up of (you will see both the HTML and the‬ ‭CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel‬ ‭that opens.‬ ‭https://www.w3schools.com/html/html_basic.asp‬ ‭HTML Elements‬ ‭An HTML element is defined by a start tag, some content, and an end tag.‬ ‭An HTML element is defined by a start tag, some content, and an end tag:‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 8‬ ‭LEA‬ ‭‭C ‬ ontent goes here...‬‭‬ ‭The HTML ‬‭element‬‭is everything from the start tag‬‭to the end tag:‬ ‭ ‬‭h1‬‭>‭M < ‬ y First Heading‬‭‬ ‭ ‬ ‬‭My first paragraph.‬‭‬ ‭Start tag‬ ‭Element content‬ ‭End tag‬ ‭‬ ‭My First Heading‬ ‭‬ ‭‬ ‭My first paragraph.‬ ‭‬ ‭‬ ‭none‬ ‭none‬ ‭ ote:‬‭Some HTML elements have no content (like the‬‭ element). These‬ N ‭elements are called empty elements. Empty elements do not have an end tag!‬ ‭Nested HTML Elements‬ ‭ TML elements can be nested (this means that elements can contain other‬ H ‭elements).‬ ‭All HTML documents consist of nested HTML elements.‬ ‭The following example contains four HTML elements (‬‭ ‭, ‬‭ ‬ ‭, ‭ ‬ ‬ h1>‬ < ‭and ‭ ‬ p>‬ < ‭):‬ ‭Example‬ ‭‬ ‬ ‭ ‬ ‭ ‬ ‭ ‭‬ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭Example Explained‬ ‭ he ‬‭ T ‬‭element is the root element and it defines‬‭the whole HTML document.‬ ‭It has a start tag ‬‭ ‭and an end tag ‬‭ ‬ ‬‭.‬ ‭Then, inside the ‭ ‬ html>‬ < ‭element there is a ‭ ‬ body>‬ < ‭element:‬ ‬ ‭ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 9‬ ‭LEA‬ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‬ ‭ ‭ he ‬‭ T ‬‭element defines the document's body.‬ ‭It has a start tag ‬‭ ‭and an end tag ‬‭ ‬ ‭.‬ ‬ ‭Then, inside the ‭ ‬ body>‬ < ‭element there is two other‬‭elements: ‭ ‬ h1>‬ < ‭and ‭ ‬ p>‬ < ‭:‬ ‭‬ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‭ he ‬‭ T ‭element defines a heading.‬ ‬ ‭It has a start tag ‬‭ ‭and an end tag ‭ ‬ ‬ /h1>‬ < ‭:‬ ‬ ‭My First Heading‬ ‭ ‬ ‭ ‭ he ‬‭ T ‭element defines a paragraph.‬ ‬ ‭It has a start tag ‬‭ ‭and an end tag ‬‭ ‬ ‭:‬ ‬ ‬ ‭My first paragraph.‬ ‭ ‬ ‭ ‭Never Skip the End Tag‬ ‭Some HTML elements will display correctly, even if you forget the end tag:‬ ‭Example‬ ‭‬ ‬ ‭ ‬ ‭ ‭‬ ‬ ‭This is a paragraph‬ ‭ ‬ ‭This is a paragraph‬ ‭ ‭‬ ‬ ‭ ‬ ‭ ‭ owever, never rely on this! Unexpected results and errors may occur if you forget‬ H ‭the end tag!‬ ‭Empty HTML Elements‬ ‭HTML elements with no content are called empty elements.‬ ‭The ‬‭ ‭tag defines a line break, and is an empty‬‭element without a closing tag:‬ ‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 10‬ ‭LEA‬ ‭Example‬ ‬ ‭This is a ‭ ‭ < ‬‬br‬ ‭ >‭ ‭‬paragraph with a line break.‬ ‬ ‭ ‭HTML is Not Case Sensitive‬ ‭HTML tags are not case sensitive: ‭ ‬ P>‬ < ‭means the same‬‭as ‬‭ ‭.‬ ‬ ‭ he HTML standard does not require lowercase tags, but‬ T ‭W3C ‬‭recommends‬‭lowercase in HTML, and ‬‭demands‬‭lowercase‬‭for stricter‬ ‭document types like XHTML.‬ ‭At W3Schools we always use lowercase tag names.‬ ‭HTML Tag Reference‬ ‭ 3Schools' tag reference contains additional information about these tags and their‬ W ‭attributes.‬ ‭Tag‬ ‭Description‬ ‭‬ ‭Defines the root of an HTML document‬ ‭‬ ‭Defines the document's body‬ ‭ to ‬ ‭Defines HTML headings‬ ‭For a complete list of all available HTML tags, visit our ‬‭HTML Tag Reference‬‭.‬ ‭https://www.w3schools.com/html/html_elements.asp‬ ‭HTML Attributes‬ ‭HTML attributes provide additional information about HTML elements.‬ ‭‬ ‭ ll HTML elements can have ‬‭attributes‬ A ‭‬ ‭Attributes provide ‬‭additional information‬‭about elements‬ ‭‬ ‭Attributes are always specified in ‬‭the start tag‬ ‭‬ ‭Attributes usually come in name/value pairs like: ‬‭name="value"‬ ‭The href Attribute‬ ‭ he ‬‭ T ‭tag defines a hyperlink. The ‭ ‬ ‬ ref‬ h ‭attribute‬‭specifies the URL of the page‬ ‭the link goes to:‬ ‭Example‬ ‬ ‭ Visit W3Schools‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 11‬ ‭LEA‬ ‭You will learn more about links in our ‭H ‬ TML Links‬‭chapter‬‭.‬ ‭The src Attribute‬ ‭ he ‬‭ T ‬‭tag is used to embed an image in an HTML‬‭page. The ‬‭ ‭attribute‬ src‬ ‭specifies the path to the image to be displayed:‬ ‭Example‬ ‬ ‭ ‭The width and height Attributes‬ ‭ he ‬‭ T ‭tag should also contain the ‭ ‬ ‬ idth‬ w ‭and ‬‭ ‭attributes,‬‭which specifies‬ height‬ ‭the width and height of the image (in pixels):‬ ‭Example‬ ‬ ‭ ‭The alt Attribute‬ ‭ he required ‭ T ‬ lt‬ a ‭attribute for the ‭‬ img>‬ < ‭tag specifies‬‭an alternate text for an image,‬ ‭if the image for some reason cannot be displayed. This can be due to slow‬ ‭connection, or an error in the ‭‬ rc‬ s ‭attribute, or if‬‭the user uses a screen reader.‬ ‭Example‬ ‬ ‭ ‭Example‬ ‭See what happens if we try to display an image that does not exist:‬ ‬ ‭ ‭You will learn more about images in our ‬‭HTML Images‬‭chapter‬‭.‬ ‭The style Attribute‬ ‭ he ‬‭ T ‭attribute is used to add styles to an element,‬‭such as color, font, size,‬ style‬ ‭and more.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 12‬ ‭LEA‬ ‭Example‬ ‬ ‭ This is a red paragraph.‬ ‭ ‬ ‭ ‭You will learn more about styles in our ‭H ‬ TML Styles‬‭chapter‬‭.‬ ‭The lang Attribute‬ ‭ ou should always include the ‬‭ Y ‭attribute inside‬‭the ‭ lang‬ ‬ html>‬ < ‭tag, to declare the‬ ‭language of the Web page. This is meant to assist search engines and browsers.‬ ‭The following example specifies English as the language:‬ ‭‬ ‬ ‭ ‬ ‭ ‬ ‭...‬ ‭ ‬ ‭ ‬ ‭ ‭ ountry codes can also be added to the language code in the ‭ C ‬ ang‬ l ‭attribute. So, the‬ ‭first two characters define the language of the HTML page, and the last two‬ ‭characters define the country.‬ ‭ he following example specifies English as the language and United States as the‬ T ‭country:‬ ‭‬ ‬ ‭ ‬ ‭ ‬ ‭...‬ ‭ ‬ ‭ ‬ ‭ ‭You can see all the language codes in our ‭H ‬ TML Language‬‭Code Reference‬‭.‬ ‭The title Attribute‬ ‭The ‬‭ ‭attribute defines some extra information‬‭about an element.‬ title‬ ‭ he value of the title attribute will be displayed as a tooltip when you mouse over‬ T ‭the element:‬ ‭Example‬ ‭‬ < p‬ ‭‭title‬ ="I'm a tooltip">‬ ‭ This is a paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 13‬ ‭LEA‬ ‭We Suggest: Always Use Lowercase Attributes‬ ‭The HTML standard does not require lowercase attribute names.‬ ‭ he title attribute (and all other attributes) can be written with uppercase or‬ T ‭lowercase like ‭t‬ itle‬‭or ‬‭TITLE‬‭.‬ ‭ owever, W3C ‬‭recommends‬‭lowercase attributes in HTML,‬ H ‭and ‬‭demands‬‭lowercase attributes for stricter document‬‭types like XHTML.‬ ‭At W3Schools we always use lowercase attribute names.‬ ‭We Suggest: Always Quote Attribute Values‬ ‭The HTML standard does not require quotes around attribute values.‬ ‭ owever, W3C ‬‭recommends‬‭quotes in HTML, and ‭d H ‬ emands‬‭quotes‬‭for stricter‬ ‭document types like XHTML.‬ ‭Good:‬ ‬ ‭ Visit our‬‭ ‭ HTML tutorial‬ ‬ ‭ ‭Bad:‬ ‬ ‭ Visit our‬‭ ‭ HTML tutorial‬ ‬ ‭ ‭ ometimes you have to use quotes. This example will not display the title attribute‬ S ‭correctly, because it contains a space:‬ ‭Example‬ ‬ ‭ ‭At W3Schools we always use quotes around attribute values.‬ ‭Single or Double Quotes?‬ ‭ ouble quotes around attribute values are the most common in HTML, but single‬ D ‭quotes can also be used.‬ I‭ n some situations, when the attribute value itself contains double quotes, it is‬ ‭necessary to use single quotes:‬ ‬ ‭ ‭Or vice versa:‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 14‬  ‭LEA‬ ‬ ‭ ‭Module Summary‬ ‭‬ ‭ ll HTML elements can have ‬‭attributes‬ A ‭‬ ‭The ‭ ‬ ref‬ h ‭attribute of ‬‭‬‭specifies the URL of the‬‭page the link goes to‬ ‭‬ ‭The ‭ ‬ rc‬ s ‭attribute of ‭‬ img>‬ < ‭specifies the path to the‬‭image to be displayed‬ ‭‬ ‭The ‭ ‬ idth‬ w ‭and ‭‬ eight‬ h ‭attributes of ‬‭ ‬‭provide size‬‭information for images‬ ‭‬ ‭The ‭ ‬ lt‬ a ‭attribute of ‭‬ img>‬ < ‭provides an alternate text‬‭for an image‬ ‭‬ ‭The ‭ ‬ tyle‬ s ‭attribute is used to add styles to an element,‬‭such as color, font,‬ ‭size, and more‬ ‭‬ ‭The ‭ ‬ ang‬ l ‭attribute of the ‭ ‬ html>‬ < ‭tag declares the‬‭language of the Web page‬ ‭ ‬ ‭The ‭ ‬ itle‬ t ‭attribute defines some extra information‬‭about an element‬ ‭HTML Exercises‬ ‭Top of Form‬ est‬ ‭Exercise:‬ ‭Add a "tooltip" to the paragraph below with the text "About W3Schools".‬ W3Schools is a web developer's‬‭ ‭ site.‬ ‭Bottom of Form‬ ‭HTML Attribute Reference‬ ‭ complete list of all attributes for each HTML element, is listed in our: ‬‭HTML‬ A ‭Attribute Reference‬‭.‬ ‭https://www.w3schools.com/html/html_attributes.asp‬ ‭HTML Headings‬ ‭HTML headings are titles or subtitles that you want to display on a webpage.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 15‬ ‭LEA‬ ‭Example‬ ‭Heading 1‬ ‭Heading 2‬ ‭Heading 3‬ ‭Heading 4‬ ‭Heading 5‬ ‭Heading 6‬ ‭Try it Yourself »‬ ‭HTML Headings‬ ‭HTML headings are defined with the ‬‭ ‭to ‬‭ ‬ ‭tags.‬ ‬ ‭defines the most important heading. ‬‭ ‬ ‭ ‭defines‬‭the least important heading.‬ ‬ ‭Example‬ ‭‬ < h1‬ ‭ >‬ ‭ Heading 1‬ ‭ ‬ ‭ ‬ ‭ Heading 2‬ ‭ ‬ ‭ ‬ ‭ Heading 3‬ ‭ ‬ ‭ ‬ ‭ Heading 4‬ ‭ ‬ ‭ ‬ ‭ Heading 5‬ ‭ ‬ ‭ ‬ ‭ Heading 6‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭ ote:‬‭Browsers automatically add some white space‬‭(a margin) before and after a‬ N ‭heading.‬ ‭Headings Are Important‬ ‭ earch engines use the headings to index the structure and content of your web‬ S ‭pages.‬ ‭ sers often skim a page by its headings. It is important to use headings to show‬ U ‭the document structure.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 16‬ ‭LEA‬ ‭h1>‬ < ‭headings should be used for main headings, followed‬‭by ‬‭ ‭headings, then‬ ‬ ‭the less important ‬‭ ‭, and so on.‬ ‬ ‭ ote:‬‭Use HTML headings for headings only. Don't use‬‭headings to make‬ N ‭text ‬‭BIG‬‭or ‭b ‬ old‬‭.‬ ‭Bigger Headings‬ ‭ ach HTML heading has a default size. However, you can specify the size for any‬ E ‭heading with the ‬‭ ‭attribute, using the CSS ‭ style‬ ‬ ont-size‬ f ‭property:‬ ‭Example‬ ‬ ‭ Heading 1‬ ‭ ‬ ‭ ‭HTML Exercises‬ ‭Use the correct HTML tag to add a heading with the text "London".‬ ‭p>London is the capital city of England. It is the most populous city in the‬ < United Kingdom, with a metropolitan area of over 13 million inhabitants.‬ ‭ ‭HTML Tag Reference‬ ‭ 3Schools' tag reference contains additional information about these tags and their‬ W ‭attributes.‬ ‭Tag‬ ‭Description‬ ‭‬ ‭Defines the root of an HTML document‬ ‭‬ ‭Defines the document's body‬ ‭ to ‬ ‭Defines HTML headings‬ ‭For a complete list of all available HTML tags, visit our ‬‭HTML Tag Reference‬‭.‬ ‭https://www.w3schools.com/html/html_headings.asp‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 17‬ ‭LEA‬ ‭HTML Paragraphs‬ ‭A paragraph always starts on a new line, and is usually a block of text.‬ ‭The HTML ‬‭ ‭element defines a paragraph.‬ ‬ ‭ paragraph always starts on a new line, and browsers automatically add some‬ A ‭white space (a margin) before and after a paragraph.‬ ‭Example‬ ‭‬ < p‬ ‭>‬ ‭This is a paragraph.‬ ‭ ‬ ‭ ‬ ‭This is another paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Display‬ ‭You cannot be sure how HTML will be displayed.‬ ‭Large or small screens, and resized windows will create different results.‬ ‭ ith HTML, you cannot change the display by adding extra spaces or extra lines in‬ W ‭your HTML code.‬ ‭ he browser will automatically remove any extra spaces and lines when the page is‬ T ‭displayed:‬ ‭Example‬ ‭‬ ‬ ‭ This paragraph‬ ‭ contains a lot of lines‬ ‭ in the source code,‬ ‭ but the browser‬ ‭ ignores it.‬ ‭ ‬ ‭ ‭‬ < p‬ ‭>‬ ‭ This paragraph‬ ‭ contains ‭ a lot of spaces‬ in the source ‭ code,‬ but the ‭ browser‬ ignores it.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 18‬ ‭LEA‬ ‭HTML Horizontal Rules‬ ‭ he ‬‭ T ‭tag defines a thematic break in an HTML page,‬‭and is most often‬ ‬ ‭displayed as a horizontal rule.‬ ‭ he ‬‭ T ‭element is used to separate content (or define‬‭a change) in an HTML‬ ‬ ‭page:‬ ‭Example‬ ‭‬ < h1‬ ‭ >‬ ‭ This is heading 1‬ ‭ ‬ ‭ ‬ ‭This is some text.‬ ‭ ‬ ‭ ‬ ‭ ‬ ‭ This is heading 2‬ ‭ ‬ ‭ ‬ ‭This is some other text.‬ ‭ ‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭The ‬‭ ‭tag is an empty tag, which means that it‬‭has no end tag.‬ ‬ ‭HTML Line Breaks‬ ‭The HTML ‬‭ ‭element defines a line break.‬ ‬ ‭Use ‬‭ ‭if you want a line break (a new line) without‬‭starting a new paragraph:‬ ‬ ‭Example‬ ‭‬ < p‬ ‭>‬ ‭This is‬ ‭ ‬ ‭ a paragraph‬ ‭ ‭ ‭w ‬ith line breaks.‬ ‬ ‭ ‭Try it Yourself »‬ ‭The ‬‭ ‭tag is an empty tag, which means that it‬‭has no end tag.‬ ‬ ‭The Poem Problem‬ ‭This poem will display on a single line:‬ ‭Example‬ ‭‬ ‬ ‭ ‭ My Bonnie lies over the ocean.‬ ‭ My Bonnie lies over the sea.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 19‬ ‭LEA‬ ‭ My Bonnie lies over the ocean.‬ ‭ Oh, bring back my Bonnie to me.‬ ‬ ‭ ‭Try it Yourself »‬ ‭Solution - The HTML Element‬ ‭The HTML ‬‭ ‭element defines preformatted text.‬ ‬ ‭ he text inside a ‭ T ‬ pre>‬ < ‭element is displayed in a‬‭fixed-width font (usually Courier),‬ ‭and it preserves both spaces and line breaks:‬ ‭Example‬ ‭‬ ‬ ‭ ‭ My Bonnie lies over the ocean.‬ ‭ My Bonnie lies over the sea.‬ ‭ My Bonnie lies over the ocean.‬ ‭ Oh, bring back my Bonnie to me.‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Exercises‬ ‭Top of Form‬ ‭Use the correct HTML tag to add a paragraph with the text "Hello World!".‬ ‭html>‬ < ‬ ‭ ‭/body>‬ < ‬ ‭ ‭Submit Answer »‬ ‭Bottom of Form‬ ‭HTML Tag Reference‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 20‬ ‭LEA‬ ‭ 3Schools' tag reference contains additional information about HTML elements and‬ W ‭their attributes.‬ ‭Tag‬ ‭Description‬ ‭‬ ‭Defines a paragraph‬ ‭‬ ‭Defines a thematic change in the content‬ ‭‬ ‭Inserts a single line break‬ ‭‬ ‭Defines pre-formatted text‬ ‭For a complete list of all available HTML tags, visit our ‬‭HTML Tag Reference‬‭.‬ ‭https://www.w3schools.com/html/html_paragraphs.asp‬ ‭HTML Styles‬ ‭ he HTML ‬‭ T style‬ ‭attribute is used to add styles to‬‭an element, such as color, font, size, and‬ ‭more.‬ ‭Example‬ ‭I am Red‬ ‭I am Blue‬ ‭I am Big‬ ‭Try it Yourself »‬ ‭The HTML Style Attribute‬ ‭Setting the style of an HTML element, can be done with the ‭s‬ tyle‬‭attribute.‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 21‬ ‭LEA‬ ‭The HTML ‬‭style‬‭attribute has the following syntax:‬ ‬ ‭ ‭The ‬‭property‬‭is a CSS property. The ‬‭value‬‭is a CSS‬‭value.‬ ‭You will learn more about CSS later in this tutorial.‬ ‭Background Color‬ ‭The CSS ‭b‬ ackground-color‬‭property defines the background‬‭color for an HTML element.‬ ‭Example‬ ‭Set the background color for a page to powderblue:‬ ‬ ‭ ‭‭ ‭ ‭T ‬his is a heading‬ ‬ ‭ ‭ ‭T ‬his is a paragraph.‬ ‬ ‭ ‭‭ < / ‬body‬ >‬ ‭ ‭Try it Yourself »‬ ‭Example‬ ‭Set background color for two different elements:‬ ‬ ‭ ‭‭ ‬ ‭ This is a‬‭ ‭ heading‬‬ ‭ ‬ ‭ This is a paragraph.‬ ‭ ‬ ‭ ‭‭ < / ‬body‬ >‬ ‭ ‭Try it Yourself »‬ ‭Text Color‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 22‬ ‭LEA‬ ‭The CSS ‭c‬ olor‬‭property defines the text color for‬‭an HTML element:‬ ‭Example‬ ‭‭ < h ‬1‬ ‭style‬ ="color:blue;">‬ ‭ This is a heading‬ ‭ ‬ ‭ ‬ ‭ This is a paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Fonts‬ ‭The CSS ‭f‬ ont-family‬‭property defines the font to be‬‭used for an HTML element:‬ ‭Example‬ ‭‭ < h ‬1‬ ‭style‬ ="font-family:verdana;">‬ ‭ This is a heading‬ ‭ ‬ ‭ ‬ ‭ This is a paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Text Size‬ ‭The CSS ‭f‬ ont-size‬‭property defines the text size for‬‭an HTML element:‬ ‭Example‬ ‭‭ < h ‬1‬ ‭style‬ ="font-size:300%;">‬ ‭ This is a heading‬ ‭ ‬ ‭ ‬ ‭ This is a paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Text Alignment‬ ‭The CSS ‭t‬ ext-align‬‭property defines the horizontal‬‭text alignment for an HTML element:‬ ‭Example‬ ‭‭ < h ‬1‬ ‭style‬ ="text-align:center;">‬ ‭ Centered Heading‬ ‭ ‬ ‭ ‬ ‭ Centered paragraph.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭Summary‬ ‭‬ ‭Use the ‭ ‬ tyle‬ s ‭attribute for styling HTML elements‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 23‬ ‭LEA‬ ‭‬ ‭ se ‭ U ‬ ackground-color‬ b ‭for background color‬ ‭‬ ‭Use ‭ ‬ olor‬ c ‭for text colors‬ ‭‬ ‭Use ‭ ‬ ont-family‬ f ‭for text fonts‬ ‭‬ ‭Use ‭‬ ont-size‬ f ‭for text sizes‬ ‭‬ ‭Use ‭ ‬ ext-align‬ t ‭for text alignment‬ ‭HTML Exercises‬ ‭Top of Form‬ ‭Use the correct HTML attribute, and CSS, to set the color of the paragraph to "blue".‬ This is a paragraph.‬ ‭ ‭https://www.w3schools.com/html/html_styles.asp‬ ‭HTML Text Formatting‬ ‭HTML contains several elements for defining text with a special meaning.‬ ‭Example‬ ‭This text is bold‬ ‭This text is italic‬ ‭This is‬‭subscript‬‭and ‬‭superscript‬ ‭Try it Yourself »‬ ‭HTML Formatting Elements‬ ‭Formatting elements were designed to display special types of text:‬ ‭‬ < ‭- Bold text‬ ‭b>‬ ‭‬ ‬ ‭ ‭- Important text‬ ‭‬ ‭ ‭- Italic text‬ ‬ ‭‬ ‭ ‭- Emphasized text‬ ‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 24‬ ‭LEA‬ ‭‬ < ‭- Marked text‬ ‭mark>‬ ‭‬ ‬ ‭ ‭- Smaller text‬ ‭‬ ‭ ‭- Deleted text‬ ‬ ‭‬ ‭ ‭- Inserted text‬ ‬ ‭‬ ‭ ‭- Subscript text‬ ‬ ‭‬ ‭ ‭- Superscript text‬ ‬ ‭HTML and Elements‬ ‭The HTML ‭ ‬ b>‬ < ‭element defines bold text, without any‬‭extra importance.‬ ‭Example‬ ‭‭ < b ‬‬ >‭ ‭T ‬his text is bold‬ ‬ ‭ ‭Try it Yourself »‬ ‭ he HTML ‭ T ‬ strong>‬ < ‭element defines text with strong‬‭importance. The content‬ ‭inside is typically displayed in bold.‬ ‭Example‬ ‭‭ < s ‬trong‬ >‬ ‭This text is important!‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭HTML and Elements‬ ‭ he HTML ‭ T ‬ i>‬ < ‭element defines a part of text in an‬‭alternate voice or mood. The‬ ‭content inside is typically displayed in italic.‬ ‭ ip:‬‭The ‭ T ‬ i>‬ < ‭tag is often used to indicate a technical‬‭term, a phrase from‬ ‭another language, a thought, a ship name, etc.‬ ‭Example‬ ‭‭ < i ‬‬ >‭ ‭T ‬his text is italic‬ ‬ ‭ ‭Try it Yourself »‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 25‬ ‭LEA‬ ‭ he HTML ‭ T ‬ em>‬ < ‭element defines emphasized text. The‬‭content inside is typically‬ ‭displayed in italic.‬ ‭ ip:‬‭A screen reader will pronounce the words in ‭ T ‬ em>‬ < ‭with‬‭an emphasis, using‬ ‭verbal stress.‬ ‭Example‬ ‭‭ < e ‬m‬ >‭ ‭ T ‬his text is emphasized‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭The HTML ‭ ‬ small>‬ < ‭element defines smaller text:‬ ‭Example‬ ‭‭ < s ‬mall‬ >‭ ‭T ‬his is some smaller text.‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭The HTML ‭ ‬ mark>‬ < ‭element defines text that should be‬‭marked or highlighted:‬ ‭Example‬ ‭‭ < p ‬‬ >‭ ‭D ‬o not forget to buy ‬ ‬ ‭milk‬ ‭ ‬ ‭‭today.‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭ he HTML ‭ T ‬ del>‬ < ‭element defines text that has been‬‭deleted from a document.‬ ‭Browsers will usually strike a line through deleted text:‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 26‬ ‭LEA‬ ‭Example‬ ‭‭ < p ‬‬ >‭ ‭M ‬y favorite color is ‬ ‬ ‭blue‬ ‭ ‬ ‭‭red.‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭ he HTML ‭ T ‬ ins>‬ < ‭element defines a text that has been‬‭inserted into a document.‬ ‭Browsers will usually underline inserted text:‬ ‭Example‬ ‭‭ < p ‬‬ >‭ ‭M ‬y favorite color is ‬ ‬ ‭blue‬ ‭ ‬ ‭‭‭ < ‬‬ ins‬ ‭ >‬ ‭red‬ ‭ ‬ ‭.‬ ‭ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭ he HTML ‭ T ‬ sub>‬ < ‭element defines subscript text. Subscript‬‭text appears half a‬ ‭character below the normal line, and is sometimes rendered in a smaller font.‬ ‭Subscript text can be used for chemical formulas, like H‬‭2‬‭O:‬ ‭Example‬ ‭‭ < p ‬‬ >‭ ‭T ‬his is ‭ < ‬‬ sub‬ ‭ >‬ ‭subscripted‬ ‭ ‬ ‭‭text.‬ ‬ ‭ ‭Try it Yourself »‬ ‭HTML Element‬ ‭ he HTML ‭ T ‬ sup>‬ < ‭element defines superscript text. Superscript‬‭text appears half‬ ‭a character above the normal line, and is sometimes rendered in a smaller font.‬ ‭Superscript text can be used for footnotes, like WWW‬‭‬‭:‬ ‭Example‬ ‭‭ < p ‬‬ >‭ ‭T ‬his is ‭ < ‬‬ sup‬ ‭ >‬ ‭superscripted‬ ‭ ‬ ‭‭text.‬ ‬ ‭ ‭Try it Yourself »‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 27‬ ‭LEA‬ ‭HTML Exercises‬ ‭Add extra importance to the word "degradation" in the paragraph below.‬ ‬ ‭ ‭WF's mission is to stop the ‬ W degradation‬ ‭ ‭of our‬ planet's natural environment.‬ ‭ ‬ ‭ ‭HTML Text Formatting Elements‬ ‭Tag‬ ‭Description‬ ‭‬ ‭Defines bold text‬ ‭‬ ‭Defines emphasized text ‬ ‭‬ ‭Defines a part of text in an alternate voice or mood‬ ‭‬ ‭Defines smaller text‬ ‭‬ ‭Defines important text‬ ‭‬ ‭Defines subscripted text‬ ‭‬ ‭Defines superscripted text‬ ‭‬ ‭Defines inserted text‬ ‭‬ ‭Defines deleted text‬ ‭‬ ‭Defines marked/highlighted text‬ ‭For a complete list of all available HTML tags, visit our ‭H ‬ TML Tag Reference‬‭.‬ ‭https://www.w3schools.com/html/html_formatting.asp‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 28‬ ‭LEA‬ ‭ TML Quotation and Citation Elements‬ H ‭https://www.w3schools.com/html/html_quotation_elements.asp‬ ‭HTML Comments‬‭https://www.w3schools.com/html/html_comments.asp‬ ‭HTML Colors‬‭https://www.w3schools.com/html/html_colors.asp‬ ‭HTML RGB and RGBA Colors‬‭https://www.w3schools.com/html/html_colors_rgb.asp‬ ‭HTML HEX Colors‬‭https://www.w3schools.com/html/html_colors_hex.asp‬ ‭HTML HSL and HSLA Colors‬‭https://www.w3schools.com/html/html_colors_hsl.asp‬ ‭HTML Styles – CSS‬‭https://www.w3schools.com/html/html_css.asp‬ ‭HTML Links‬‭https://www.w3schools.com/html/html_links.asp‬ ‭HTML Links - Different Colors‬‭https://www.w3schools.com/html/html_links_colors.asp‬ ‭HTML Links - Create Bookmarks‬‭https://www.w3schools.com/html/html_links_bookmarks.asp‬ ‭HTML Images‬‭https://www.w3schools.com/html/html_images.asp‬ ‭HTML Image Maps‬‭https://www.w3schools.com/html/html_images_imagemap.asp‬ ‭HTML Background Images‬‭https://www.w3schools.com/html/html_images_background.asp‬ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 29‬ ‭LEA‬ L‭ EARNING MODULE NO. 2‬ ‭Title‬ ‭HTML FORMS, GRAPHICS‬ ‭Topic‬ ‭ TML Form Elements, Input Types, Input Attributes, HTML‬ H ‭Graphics Canvas & SVG‬ T‭ ime Frame‬ ‭10 hrs.‬ ‭Introduction‬ ‭This module will introduce some html forms and graphics.‬ ‭Objectives‬ ‭At the end of this session, the students will be able to:‬ ‭1.‬ ‭Explain concept of html forms and graphics‬ ‭2.‬ ‭Familiarize the html form elements, type and attributes‬ ‭3.‬ ‭Describe the HTML graphics canvas and SVG‬ ‭Learning Activities‬ ‭HTML Forms‬ ‭ n HTML form is used to collect user input. The user input is most often sent‬ A ‭to a server for processing.‬ ‭The Element‬ ‭The HTML‬‭ ‬‭element is used to create an HTML‬‭form for user input:‬ ‭‭ ‬ ‭.‬ ‭ form elements‬ ‭.‬ ‭ ‬ ‭ ‭IT 413 – WEB SYSTEMS AND TECHNOLOGIES‬ ‭RACABAÑERO 30‬