HTML Introduction - PDF

IT2301 INTRODUCTION TO HTML An HTML document can be opened and modified using various source code editors and web development applications such as Microsoft How HTML Wor...

IT2301 INTRODUCTION TO HTML An HTML document can be opened and modified using various source code editors and web development applications such as Microsoft How HTML Works Visual Studio Code and Adobe Dreamweaver. Since HTML is saved in plain text, it can be opened and modified in any basic text editor, Introduction to HTML and its Specification such as Windows Notepad and Apple TextEdit. Still, they do not have features that make coding easier for developers. HyperText Markup Language (HTML) is the standard markup language for creating Web pages, no matter how simple or complex. Another critical requirement for an HTML document is saving it with a It allows a web author to arrange and define how content should be.html file extension. To preview an HTML webpage, open the displayed. document on a web browser such as Google Chrome, Microsoft Edge, or Apple Safari. The “HyperText” in HTML refers to how links on the Web let users move from one document to another. It happens when clicking a HTML Basics highlighted link related to the topic being read in an article takes the reader from that page to another. HTML Element HTML has been evolving as a technology standard since Tim Berners- It is the component of an HTML document containing formats, Lee's introduction in 1993. HTML5 is the fifth and latest version of the instructions, and semantic meaning. It consists of a start tag, content, language. HTML5 supports multimedia such as audio and video, new and an end tag, such as the following: tags, elements, and application programming interfaces (API). Hello World! The World Wide Web Consortium (W3C) manages the specifications of what is in HTML and what is not. Companies that create web Paragraph – the basic unit of text in an HTML document. browsers take their specifications and implement behaviors expected when browsers come across any of the allowed formatting, such as An HTML element such as a paragraph may also contain another making text bold, changing its color, and even both element such as the following, World! being simultaneously. The HTML specifications constantly evolve, and the the other element. element is used to add a line break to the changes from version to version are only added to expand browser HTML code and creates another blank line. It has no end tag. functionality and modernize technology. HTML Document Hello It is a text file created in any text editor containing textual content, World! elements, attributes, and tags such as , , , and. These naming conventions tell the computer and the web browser that it is in HTML and should be read as such. By Welcome! applying these conventions to a text file, a user can write and design a basic webpage and upload it to the Internet. 01 Handout 1 *Property of STI  [email protected] Page 1 of 4  IT2301 HTML Attribute Headings It is used to modify or define an HTML element. It is placed within an These are titles or subtitles that can be displayed on a webpage. It has element's opening tag, which can contain multiple attributes separated six (6) levels, with the heading number indicating a heading of less by a space. It is also known as the name=value pair, as it provides importance, being the top level, and as the lowest. additional styling to the element. Sample Example: Hello World! Heading 1 Heading 2 class is the attribute name, while important is the value enclosed … Heading 6 with quotation marks. HTML Tags Links These keywords define how web browsers will format and display the a href attribute that specifies the URL of the webpage the link goes content on an HTML file. They are the starting and ending parts of an to. It must have a destination and a label. Syntax: called tags. The most common kind consists of strings or a sequence of characters enclosed in opening and ending tags, like the following: An absolute URL directs to another website such as: Google A relative URL directs to a file within the same website, such as: Sample Products Form It is an alternative way to interact with the server and collect user inputs. It is constructed in HTML in the same manner as table or list. It uses tag. A sample that displays a form for name submission: Source: Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous. Addison-Wesley Figure 1. Anatomy of a typical HTML tag Figure 1 details the anatomy of a typical tag, including the name of the element (strong), angle brackets, and a forward slash (/ - marks the end tag). 01 Handout 1 *Property of STI  [email protected] Page 2 of 4  IT2301 HTML Table HTML Structure It consists of table cells that allow web developers to organize and HTML follows a proper structure to have an organized syntax in an arrange data into rows and columns. It uses tag. HTML document. Table Elements Table Header – the top row of a table that acts as a title Sample HTML Structure: for the type of information in each column. Table Row – used to indicate the number of rows displayed in a table. Table Data – holds the data displayed in a table. The My first Web Page data must match the position of the header it corresponds to. Colspan is used to join two or more columns in a table, while Rowspan is used to do the same for rows. Border attribute is used to separate the table cells. , , and are used to group the header, footer, and body content in a table. Hello World! , , and Using colspan and rowspan In this sample structure, it uses the following syntax and elements: Firstname Name Lastname Subject 1. – short for Document Type Definition that tells the Marks browser or any software reading the HTML document what type of document is about to be processed. The HTML document will Aryan not work without this element. Gupta rowspan=“2”> 2. – also referred to as “root element.” It is the container for Jack all other HTML elements except for. Math 3. - shows extra information about an element. John 94 4. – the container for metadata (data about data) which is Reece placed between the and the tags. 5. – used to specify the page description, author of the Science document, character coding, and other metadata. Samntha 88 6. – defines the content in an HTML document displayed in Grooves the browser. 7. – defines the connection between the current document Row and an external source. 3 Cell 1 8. – used to embed a client-side script (JavaScript) that either contains scripting statements or points to an external script file through the src attribute. 01 Handout 1 *Property of STI  [email protected] Page 3 of 4  IT2301 References: Donahoe L., Hartl M. (2022). Learn enough HTML, CSS, and layout to be dangerous. Addison-Wesley. Gupta A. (2021). A complete guide to HTML tables. [Web Article]. Retrieved on January 23, 2022, from https://www.simplilearn.com/tutorials/html-tutorial/html- tables Lutkevich B. (2022). HTML (hypertext markup language). [Web Article]. Retrieved on January 20, 2022, from https://www.theserverside.com/definition/HTML- Hypertext-Markup-Language 01 Handout 1 *Property of STI  [email protected] Page 4 of 4