LESSON 1 HTML (HYPERTEXT MARK-UP LANGUAGE) BUILDING BLOCK OF WEBSITES ITS 300 - WEB DEVELOPMENT 1 Specific Learning Outcomes 1. Demonstrating proper use of HTML tags 2. Develop intended layout with the use HTML tags. 3. Constructing a webpage with the appropriate practice of HTML tags Motivation/Prompting Question(s) • What is a website? A website is a collection of information and graphics displayed through a number webpages located on the internet or World Wide Web which can be accessed by Web Browsers like for example Google Chrome and Mozilla Firefox. • What is the most common website nowadays? As of these times, what is most common would likely be Facebook. Why? It is THE social network with billions of users, amounting to almost the whole population due to the technological age we are in today. Motivation/Prompting Question(s) • What do you think it takes to build a website like that? To build such a website requires great skill and an unbelievable amount of experience. To build such great things takes time. In this module will be the start of your journey to building websites, starting with the building block of all websites, the markup language HTML. DISCUSSION HTML What is HTML? HTML which means for Hyper Text Markup Language is the building block for websites. Unlike scripting or programming languages that use complicated codes and scripts to perform functions, HTML uses tags to identify content. The Web Structure Being able to code in HTML is essential for any aspiring web developer or professional. Gaining this skill is the beginning for you to learn how to develop websites. Modern Web Design HTML: Structure CSS: Appearance JavaScript: Behavior and Actions PHP or others: Backend HTML Basics <html> The structure of an HTML document is like a sandwich with each html tag acting as the bread slice or bun for the contents of the website for without the bread it won’t be called a sandwich. <head> The <head> tag is found at top of the HTML document. The head tag contains most of the non-visual elements for the webpage. <body> What follows the <head> tag is the body tag which is written as <body>. All visible elements are contained within the body tag of and HTML document. The HTML file Add the basic structure to your text editor, it could be Notepad, Notepad++, Sublime, etc. with “Hello World” in the body section. In this example, save the file as HelloWorld.html. After saving the file when it is opened the following is the result displayed in the web browser. <title> To place a title on the tab of your browser for your web page, add a <title> element to your head section. Save the file and it will produce the following result: Paragraphs To create a paragraph, type the <p> element with its opening and closing tags. Single Line Break To add a single line of text without starting a new paragraph use <br />. Formatting Elements There are a many elements that give a specific text style. Formatting elements were made to create special types of text. HTML Basics Headings, Lines, Comments HTML Basics: Headings, Lines, Comments HTML Headings HTML headings have six levels; these headings are arranged according to size. These levels are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. HTML Basics: Headings, Lines, Comments Horizontal Lines Use <hr /> to create a horizontal line on you HTML page. HTML Basics: Headings, Lines, Comments Comments Your Browser does not display comments on your HTML page but it helps you add description and notes to your HTML document. HTML Elements HTML documents are made up of elements. These elements are written using a start tag and an end tag. Some elements like <br /> and <hr /> do not have end tags. HTML Attributes HTML attributes are what provide additional information about an element or tag and also modify them. An example below is the “align” attribute with the value “center”. Attribute Measurements We can also modify measurements of elements using attributes. In the example below we modify the horizontal line to a width of 50 pixels. The Align Attribute The align attribute is used to state how the text is aligned. HTML Images The <img> Tag The <img> tag is used to insert an image. It comprises of only attributes, and does not have a closing tag. The image’s URL(address) can be defined using the src attribute. HTML Images Image Location The image location for the src attribute is between the quotation marks (“ ”). Example 1. If you have an image named “image.jpg” in the same folder as the HTML file, your code should look like the example provided in the <img> tag example: Example 2. If you have an image named “image.jpg” in another folder, your code should look like this: HTML Images Example 3. In case the image cannot be displayed, the alt attribute specified an alternative text that describes the image in words. The alt attribute is required. HTML Images Image Resizing Image resizing is used to define the image size, the image width and image height attributes. Note: The value can be specified in pixels or as a percentage. Note: Loading images takes time. The use of large images can slow down your page. HTML Images Image Border By default, an image has no border. The use of border attribute within the image tag is needed to create a border around the image. HTML Links The <a> Tag Links are one of the integral parts of every web page. Adding links to text or images will enable the user to click on them in order to be directed to another file or webpage. HTML links are defined using the <a> tag. Use the “href” attribute to define the link’s destination address: HTML Ordered Lists, Unordered Lists An ordered list in HTML defined using the <ol> tag with each listed item defined by a <li> tag. HTML Ordered Lists, Unordered Lists An unordered list starts with the <ul> tag. HTML Tables To create an HTML table, you use the <table> tag. These tables are divided into rows by using the <tr> tag. The tables rows are divided into column or table data which then we use the <td> tag. Here is an example code of a table with a single row and three columns: HTML Tables Border, Colspan and bgcolor Attributes You can add a border to your table element using the border attribute. A table cell can span to two or more columns using the colspan attribute. HTML Tables To specify a color for a table cell you can use the bgcolor attribute to change its color. HTML Forms To collect information from the users of your webpage we use forms defined by the <form> tag. The action attribute is used to point to a webpage or link that will load after the form is submitted HTML Forms The method attribute specifies the HTTP method to be used when forms are submitted. When you use GET, the form data will be submitted to the page address or URL. You use POST when the form is for updating data or when you are handling sensitive information like passwords. POST requests offer better security because the submitted data will not be visbile in the page address or URL. Form Elements and Input Types Text Input Type When getting input from users like sentences we use the <input> with the attribute type as text. Form Elements and Input Types Textarea Element When you need to get more input from the user like paragraphs and essays we use the <textarea> element. Form Elements and Input Types Radio Input Type When using the radio input type, it allows the user the ability to choose one from a number of choices. Checkbox Input Type To give the user the ability to choose multiple items we use the checkbox input type. Form Elements and Input Types Password Input Type For getting sensitive input like passwords that need to be secured we use the password input type. File Input Type For when you need the user to choose a file to upload we must use the file input type. Form Elements and Input Types Number Input Type When you need the user to input numbers instead of text we have the number input type for that. Date Input Type For getting specific date input form users the date input type lets the u ser choose a date. THANK YOU.
