HTML(updated 1.5) (1).pdf

Hypertext Mark-Up Language (HTML) - the most widely used language to write Web Pages - Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,...

Hypertext Mark-Up Language (HTML) - the most widely used language to write Web Pages - Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext - HTML is a Markup Language which means you use HTML to simply “mark-up” a text document with tags that tell a Web browser how to structure it to display - originally, it was developed with the intent of defining the structure of documents like headings, paragraphs, lists, ad so forth to facilitate the sharing of scientific information between researchers - created by Berner’s-Lee in late 1991 but “HTML 2.0” was the first standard HTML specification which was published in 1995 - the fifth and final major HTML version is html 5.0 Sample HTML Document This is the title of the document This is a heading Document content goes here … Type the code above using any text editor and save it as sample.htm. Open the file using any web browser. INTRODUCTION TO COMPUTING Sample Output: HTML Prepared by Kim L. Faburada 1  HTML Tags The tags are enclosed within angle braces. Except few tags, most of the tags have their corresponding closing tags. For example, has its closing tag with and tag has its closing tag tag, etc. The previous HTML document uses the following tags: Tag Description This tag defines the document type and HTML version This tag signifies the beginning and end of HTML code. This tag defines the head portion of the document which contains information related to the document. The tag is used inside the section to mention the document title. This tag signifies the beginning and end of the visible portion of the web page when viewed in a browser. It keeps other HTML tags like , , , etc. This tag represents the heading. This tag represents a paragraph. To learn HTML, you will need to study various tags and understand how they behave, while formatting a textual document. Learning HTML is simple as users have to learn the usage of different tags in order to format the text or images to make a beautiful webpage. World Wide Web consortium (W3C) recommends using lowercase tags starting from HTML 4. The HTML Document Structure A typical HTML document will have the following structure: Document declaration tag INTRODUCTION TO COMPUTING Document header related tags Document body related tags HTML Prepared by Kim L. Faburada 2  - the declaration tag is used by the web browser to understand the version of the HTML used in the document - DOCTYPE tag always begins with an exclamation point and is always placed at the beginning of the document before any other tag. - DOCTYPE should always be uppercase - optional tag but coder promises to conform to certain standards. - if there is no DOCTYPE tag the web browser will assume something quirky and will process the page in quirks mode - Web browser processes the page in standards mode - current version of HTML is 5 and it makes use of the following declaration: There are many other declaration types which can be used in HTML document depending on what version of HTML is being used. Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has 6 levels of headings, which use the elements , , , , , and While displaying any heading, browser adds one line before and one line after that heading. Example: This is a sample of a heading This is heading 1 This is heading 2 INTRODUCTION TO COMPUTING This is heading 3 This is heading 4 This is heading 5 This is heading 6 The output will be: HTML Prepared by Kim L. Faburada 3  Paragraph Tag The tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in between an opening and a closing tag. Example: Sample Paragraph This is the first paragraph This is the second paragraph This is the third paragraph Output: Line Break Tag Whenever you use a element, anything following it starts from the next line. This tag is an example of an empty element, where you do not need opening and closing tags, as there is nothing to go in between them. The tag has a space between the characters br and the forward slash. If you omit this space, INTRODUCTION TO COMPUTING older browser will have trouble rendering the line break, while if you miss the forward slash character and just use , it is not valid in XHTML (Extensible HyperText Mark-up Language). Example: Example of Line Break CCS 1 Introduction to Computing. College of Computer Studies Silliman University HTML Prepared by Kim L. Faburada 4  Output: Centering Content you can use tag to put any content in the center of the page or any table cell Example: This text is center-aligned. Horizontal Lines used to visually break-up sections of a document the tag creates a like from the current position in the document to the right margin and breaks the line accordingly Example: College of Computer Studies Output: INTRODUCTION TO COMPUTING Style Attributes color, background-color, width, height Example: 16 Basic Color Names aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow HTML Prepared by Kim L. Faburada 5  Preserve Formatting Sometimes, you want your text to follow the exact format of how it is written in the HTML document. It these cases, you can use the preformatted tag. Any text between the opening tag and the closing tag will preserve the formatting of the source document. Example: Preformatting Example Hello everyone! How are you? Output: Nonbreaking Spaces A commonly used entity in HTML is the non-breaking space: &nbsp; A non-breaking space is a space that will not break into a new line. Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive. Examples: § 10 10 km/h INTRODUCTION TO COMPUTING 10 PM Another common use of the non-breaking space is to prevent browsers from truncating spaces in HTML pages. If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the &nbsp; character entity. HTML Prepared by Kim L. Faburada 6  Useful HTML Character Entities - codes beginning with an ampersand (&), followed by an entity name or entity number, and ending with a semicolon - names and numbers represent the same thing Symbol Entity Name Entity Number & (ampersand) &amp; &#38; < (less than) &lt; &#60; > (greater than) &gt; &#62; (non breaking space) &nbsp; &#160; (cent) &cent; &#162; (pound) &pound; &#163; (yen) &yen; &#165; (copyright) &copy; &#169; (registered trademark) &reg; &#174; (degree) &deg; &#176; (plus or minus) &plusmn; &#177; (trademark) &trade; &#8482; HTML Elements An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag, where the element is preceded by a forward slash as shown below with few tags: Start Tag Content End Tag This is a paragraph content. This is a heading content. This is a division content. INTRODUCTION TO COMPUTING So here, … is an element, … is another HTML element. There are some HTML elements which do not need to be closed like , and elements. These are known as void elements. HTML documents consists of a tree of these elements and they specify how HTML documents should be built, and what kind of content should be placed in what part of an HTML document. HTML Tag vs. Element An HTML element is defined by a starting tag. If the element contains other content, it ends with a closing tag. For example, is starting tag of paragraph and is closing tag of the same paragraph but This is a paragraph is a paragraph element. HTML Prepared by Kim L. Faburada 7  Nested HTML Elements Keeping one HTML element inside another HTML element is allowed. Example of Nested Elements This is italic heading This is underlined paragraph The output will be: HTML Comment Tag - - used to insert comments in the source code - comments are not displayed in the browsers. - you can use comments to explain your code, which can help you when you edit the source code at a later date INTRODUCTION TO COMPUTING Example: This is a paragraph. HTML Prepared by Kim L. Faburada 8  HTML Formatting If you use a word processor, you must be familiar with the ability to make text bold, italicized, or underlined; these are just three of the ten options available to indicate how text can appear in HTML and XHTML. Italic Text - and - anything that appears within the… element is displayed in italicized - as substitute Bold Text - and - as substitute Superscript Text - and - the font size used is the same size as the characters surrounding it but is displayed half a character’s height above the other characters Subscript Text - and - the font size used is the same as the characters surrounding it, but is displayed half character’s height beneath the other characters Underlined Text - anything that appears within and element is displayed with underline Strike Text - and - anything that appears within the and element is displayed with strikethrough, which is a thin line through the text Monospaced Font - the content of the … is written in monospaced font INTRODUCTION TO COMPUTING - most of the fonts are known as variable-width fonts because different letters are of different widths (for example, the letter ‘m’ is wider than the letter “I”) Larger Text - the content of the … element is displayed one font size larger than the rest of the text surrounding it Smaller Text - the content of the … element is displayed one font size smaller than the rest of the text surrounding it HTML Prepared by Kim L. Faburada 9  HTML Phrase Tags These tags are displayed in a similar with as other basic tags like , , and. Emphasized Text - anything that appears within … element is displayed as emphasized text Marked Text - anything that appears within … element is displayed as marked with yellow ink Strong Text - anything that appears within … element is displayed as important text Quoting Text - tag for quoting blocks from other sources - text inside the element is usually indented from the left and right edges of the surrounding text, and sometimes uses an italicized font - and Example: …other codes For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. Output: INTRODUCTION TO COMPUTING HTML Prepared by Kim L. Faburada 10  Creating a List An ordered list starts with the tag. Each list item starts with the tag Example: BSIT BSCS BSIS Ordered HTML List – The Type Attribute The type attribute of the tag defines the type of the list item marker: Type Description type = “1” The list items will be numbered with numbers (default) type = “A” The list items will be numbered with uppercase letters type = “a” The list items will be numbered with lowercase letters type = “I” The list items will be numbered with uppercase roman numbers type = “i” The list items will be numbered with lowercase roman numbers Example: BSIT BSCS BSIS Output: INTRODUCTION TO COMPUTING Unordered HTML List An unordered list starts with the tag. Each list item starts with the tag. The list items will be marked with bullets (small black circles) by default: Example of bulleted list: Banana Grapes Apple HTML Prepared by Kim L. Faburada 11  Unordered HTML List – Choose List Item Market Value Description disc Sets the list item marker to a bullet (default) circle Sets the list item marker to a circle square Sets the list item marker to a square none The list items will not be marked Example Banana Grapes Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right. Example: INTRODUCTION TO COMPUTING Set Image Alignment Setting image Alignment HTML Prepared by Kim L. Faburada 18  Hyperlink - activated by clicking a text or graphic - depending on the link, opens a different location on the page, opens a different Web page, starts and email message, downloads a file, opens video or audio player, starts a Web-based program, etc. tag - href= attribute for a path to a different destination - If link is not for a specific page, default page for the site is returned (pages named either index or default) Example: Visit Silliman University for more details. Absolute path - paths that contain a complete address Relative path - shortened name/address for path - link to files in the same Web site as the link itself - destination file is relative to current file’s location Example: New Page Link to a file in a subfolder of current one (child folder) Example: INTRODUCTION TO COMPUTING Article page Link to a file up one level of current folder (parent folder) Example: Home Opening in link in a New Browser or Tab Silliman University Link to send a message to an email address Example: Email HTML Prepared by Kim L. Faburada 19  Adding a subject to the message Example: Contact us Adding title to hyperlink Example: Send us a message Anchor - marker within an HTML document - mark the anchor location then create a hyperlink to it Example (for anchor point): Sample anchor Example (to refer to anchor point): Go to sample anchor Example (if in a different file): Different file anchor How to Add Favicon in HTML Favicon INTRODUCTION TO COMPUTING - a small image displayed next to the page title in the browser tab - t should be a simple image with high contrast - you can use any image you like as your favicon. You can also create your own favicon on sites like https://iconarchive.com/tag/picture - To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder. A common name for a favicon image is "favicon.ico". Next, add a element to your "index.html" file, after the element, like this: HTML Prepared by Kim L. Faburada 20  Use the HTML element to insert a favicon My Page Title DIVs and ID’s Div Tag The div tag is a block level HTML element. It is used to divide or section other HTML tags into meaningful groups. Id Attribute The id attribute is used to label sections or parts of your HTML document. You may only use the same id once per page, so save it for important major sections of your page. Additionally, the id selector in CSS has a high specificity level and therefore overrules other things (like the class selector). A perfect example of the use of a div tag and id attribute is to designate a navigation list: Your browser does not support the audio element. Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed. Add muted after autoplay to let your audio file start playing automatically (but muted): HTML Prepared by Kim L. Faburada 28  Browser Support The numbers in the table specify the first browser version that fully supports the element. HTML Audio Formats There are three supported audio formats: MP3, WAV, and OGG. The browser support for the different formats is: HTML Audio - Media Types INTRODUCTION TO COMPUTING HTML Audio - Methods, Properties, and Events The HTML Data Object Model (DOM) defines methods, properties, and events for the element. This allows you to load, play, and pause audios, as well as set duration and volume. There are also DOM events that can notify you when an audio begins to play, is paused, etc. References: https://www.w3schools.com/html/html_media.asp HTML Prepared by Kim L. Faburada 29  The HTML Style Attribute Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: The property is a CSS property. The value is a CSS value. Background Color: This is a heading This is a paragraph. Text Color This is a heading This is a paragraph. Fonts This is a heading This is a paragraph. Text Size This is a heading This is a paragraph. This is a paragraph. INTRODUCTION TO COMPUTING This is another paragraph. Text Alignment Centered Heading Centered paragraph. Reference: https://www.w3schools.com HTML Prepared by Kim L. Faburada 30