LESSON 1 HTML (1).pdf

Prepared by Mr. Renato L. Adriano II, MSIT WHAT IS HTML? HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents are described by HTML tags. Each HTML tag describes different document content. WHAT IS HTM...

Prepared by Mr. Renato L. Adriano II, MSIT WHAT IS HTML? HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags. HTML documents are described by HTML tags. Each HTML tag describes different document content. WHAT IS HTML? The original HTML was designed by Tim Berners Lee. HTML is considered as leading mark up language used in designing and creating web hypertext documents together with other scripting languages. Its functionality can greatly be increased. WHAT IS XHTML? XHTML stands for Extensible Hypertext Mark Up Language. It is the W3C recommended standard for writing HTML. Is a cleaner, well-formed version of HTML. XHTML is stricter than HTML. DIFFERENCES WITH HTML XHTML tags, whether empty or paired tags must be always closed. XHTML element name must always be in lowercase. XHTML attribute names must always be in lowercase. XHTML attribute values must always be quoted. XHTML attribute minimization is forbidden. is mandatory in XHTML. SIMILARITIES WITH HTML Plain text files saved with.html extension name. Created using text editor. Using the same tags. SAMPLE HTML CODE WEB BROWSERS The purpose of a web browser is to read HTML documents and display them. The browser does not display the HTML tags but uses them to determine how to display the document. HTML STRUCTURE 1. HTML TAGS A tag represents the various elements of the HTML document. It provides instructions on how the information will be processed by the browser. It consists of an element name (or letter symbol) enclosed in a left and right-angle brackets. TYPES OF HTML TAGS  1. PAIRED TAGS Consist of a start tag and an end tag. The start tag marks the beginning of a section that is indicated by a left angle bracket, an element name (or letter symbol) and a right-angle bracket. On the other hand, end tag marks the end of a section and looks the same as the start tag with the forward slash before the element name of symbol. Examples: ▪ ▪ ▪  2. EMPTY TAGS Empty tags are tags that DO NOT require an end tag. Examples: ▪ or ▪ or ▪ or  CASE SENSITIVE? HTML tags are NOT case sensitive: means the same as. The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML. 2. HTML ELEMENTS An HTML element usually consists of a start tag and end tag, with the content inserted in between: The HTML element is everything from the start tag to the end tag. TYPES OF HTML ELEMENTS  1. BLOCK LEVEL ELEMENTS A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: ▪ to ▪ ▪ ▪  2. INLINE ELEMENTS An inline element does not start on a new line and only takes up as much width as necessary. Examples of inline elements: ▪ ▪ ▪ 3. HTML ATTRIBUTES All HTML elements can have attributes. Attributes provide additional information about an element. Attributes are always specified in the start tag. Attributes usually come in name/value pairs like name="value“. SINGLE OR DOUBLE QUOTES? C O M M O N E L E M E N T AT T R I B U T E S H T M L TA G S  DOCTYPE DECLARATION The declaration represents the document type and helps the browser to display a web page correctly. It must only appear once, at the top of the page (before any HTML tags). There are different document types. To display a web page correctly, the browser must know both type and version. The doctype declaration is NOT case sensitive. All cases are acceptable:  DOCTYPE DECLARATION HTML5  HTML VERSIONS Since the early days of the web, there have been many versions of HTML:  HTML TAGS ▪ is used to indicate that the document is an HTML file. It indicates the beginning and the end of an HTML file. ▪ this tags delimits the header section of the document and contains information about the document that is NOT generally displayed within the document. ▪ is a tag that sets the overall page characteristics and delimits the beginning and end of the body section of the HTML document. It contains the entire document to be displayed on the page.  HTML COMMENTS ▪ You can add comments to your HTML source by using the following syntax: ▪ Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag. TEXT APPEARANCE TA G S  HTML FONT The tag specifies the font face, font size, and color of text. HTML FONT  ▪ This tag italicizes section of text in an HTML document. ▪ This tag bolds section of text in an HTML document. ▪ This tag underlines section of text in an HTML document.  ▪ This tag emphasize section of text in an HTML document. ▪ This tag is used to create subscript in an HTML document. ▪ This tag is used to create superscript in an HTML document  HTML HEADING ▪ Headings are defined with the to tags. ▪ defines the most important heading. ▪ defines the least important heading.  A R E H E A D I N G S I M P O R TA N T ? Search engines use the headings to index the structure and content of your web pages. Users skim your pages by its headings. It is important to use headings to show the document structure. headings should be used for main headings, followed by headings, then the less important , and so on. NOTE: Use HTML headings for headings only. Don't use headings to make text BIG or bold.  HTML DISPLAY You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed. NEITHER… SAME RESULT H T M L S P E C I A L TA G S  HTML PARAGRAPH The HTML element defines a paragraph. Optional Attributes: Align (Right, Left, Center, Justify) Title Width  HTML LINE BREAKS The HTML element defines a line break. HTML SPACES  HTML PREFORMATTED The text inside a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:  HTML HORIZONTAL RULE The tag defines a thematic break in an HTML page and is most often displayed as a horizontal rule. IMAGES, VIDEOS, LINKS  HTML IMAGES (jpg, png, gif) ▪ The tag defines an image in an HTML page. ▪ The tag has two required attributes: src and alt. HTML VIDEOS (mp4,webm,ogg)  HTML LINKS ▪ The tag defines a hyperlink, which is used to link from one page to another. ▪ The most important attribute of the element is the href attribute, which indicates the link's destination. SETTING IMAGES AS LINKS IMAGES AND TEXT COMBINED  HTML MARQUEE An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML tag. H T M L TA B L E TA G S  HTML TABLE An HTML table consists of the element and one or more , , and elements. The element defines a table row, the element defines a table header, and the element defines a table cell. NOTE: Tables should not be used for page layout.  HTML LIST ▪ The tag defines a list item. ▪ The tag is used in ordered lists() and unordered lists (). HTML FORMS  HTML FORM The tag is used to create an HTML form for user input. The element can contain one or more of the following form elements: T E X T B OX , PA S S WO R D F I E L D & BUTTON TEXT AREA RADIO BUT TON CHECK BOXES DROP DOWN LIST BOX D AT E A N D N U M B E R FIELD SET END OF LESSON https://www.w3schools.com