Module1.pdf
Document Details
Tags
Full Transcript
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 thisdocument is an HTML5 document T he html> < element is the root element of an HTMLpage The head> < element contains meta information aboutthe HTML page The element specifies a title for the HTMLpage (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, andis 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 elementis everything from the start tagto 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 bottomleft 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"PlainText" 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 > Saveasin the Notepad menu. ame the file "index.htm"and set the encoding to UTF-8(whichis 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 testcodefast. 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 endswith /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 documenttype, 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. definesthe 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 elementis everything from the start tagto 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 definesthe 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 otherelements: 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 emptyelement 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 sameas . he HTML standard does not require lowercase tags, but T W3C recommendslowercase in HTML, and demandslowercasefor 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 informationabout 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 attributespecifies 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 Linkschapter. The src Attribute he T tag is used to embed an image in an HTMLpage. 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 specifiesan 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 ifthe 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 Imageschapter. 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 Styleschapter. The lang Attribute ou should always include the Y attribute insidethe 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 LanguageCode Reference. The title Attribute The attribute defines some extra informationabout 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 itleor TITLE. owever, W3C recommendslowercase attributes in HTML, H and demandslowercase attributes for stricter documenttypes 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 recommendsquotes in HTML, and d H emandsquotesfor 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 thepage the link goes to The rc s attribute of img> < specifies the path to theimage to be displayed The idth w and eight h attributes of provide sizeinformation for images The lt a attribute of img> < provides an alternate textfor 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 thelanguage of the Web page The itle t attribute defines some extra informationabout 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. definesthe 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, followedby headings, then the less important , and so on. ote:Use HTML headings for headings only. Don't useheadings to make N text BIGor 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 definea 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 ithas no end tag. HTML Line Breaks The HTML element defines a line break. Use if you want a line break (a new line) withoutstarting 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 ithas 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 afixed-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 toan 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 tyleattribute. IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 21 LEA The HTML styleattribute has the following syntax: The propertyis a CSS property. The valueis a CSSvalue. You will learn more about CSS later in this tutorial. Background Color The CSS b ackground-colorproperty defines the backgroundcolor 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 olorproperty defines the text color foran HTML element: Example < h 1 style ="color:blue;"> This is a heading This is a paragraph. Try it Yourself » Fonts The CSS f ont-familyproperty defines the font to beused 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-sizeproperty defines the text size foran 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-alignproperty defines the horizontaltext 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 issubscriptand 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 anyextra importance. Example < b > T his text is bold Try it Yourself » he HTML T strong> < element defines text with strongimportance. 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 analternate voice or mood. The content inside is typically displayed in italic. ip:The T i> < tag is often used to indicate a technicalterm, 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. Thecontent inside is typically displayed in italic. ip:A screen reader will pronounce the words in T em> < withan 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 bemarked 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 beendeleted 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 beeninserted 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. Subscripttext 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 H2O: Example < p > T his is < sub > subscripted text. Try it Yourself » HTML Element he HTML T sup> < element defines superscript text. Superscripttext 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 Commentshttps://www.w3schools.com/html/html_comments.asp HTML Colorshttps://www.w3schools.com/html/html_colors.asp HTML RGB and RGBA Colorshttps://www.w3schools.com/html/html_colors_rgb.asp HTML HEX Colorshttps://www.w3schools.com/html/html_colors_hex.asp HTML HSL and HSLA Colorshttps://www.w3schools.com/html/html_colors_hsl.asp HTML Styles – CSShttps://www.w3schools.com/html/html_css.asp HTML Linkshttps://www.w3schools.com/html/html_links.asp HTML Links - Different Colorshttps://www.w3schools.com/html/html_links_colors.asp HTML Links - Create Bookmarkshttps://www.w3schools.com/html/html_links_bookmarks.asp HTML Imageshttps://www.w3schools.com/html/html_images.asp HTML Image Mapshttps://www.w3schools.com/html/html_images_imagemap.asp HTML Background Imageshttps://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 HTMLform for user input: . form elements . IT 413 – WEB SYSTEMS AND TECHNOLOGIES RACABAÑERO 30
