LESSON 3: HTML START UPGRAYZON L. GONZALESICT INSTRUCTOR

IN THIS LESSON, YOU SHOULD BE ABLE TO:• Define HTML5;• Know the origin of HTML5; and• Create, save and view HTML5 pages.

DEFINING HTML

• Basically, HTML is not a complicated programming language as most people think, but having a good understanding of HTML will help you think like a computer programmer.• HTML stands for Hyper Text Markup Language. To make it

easier to understand, lets break this down, word for word.

• Hyper – in simple terms, it means “active”, something that can be all over the place. Similarly, when you are on the internet using a web browser, you can in fact go “all over the place.” When you see something you like on the web, you can immediately go to that place.• Text – this means that you can create a web page in a simple

“text” file format.• Markup – in order to create web pages, you type in text

which is then “marked-up” or identified for proper rendering by your web browser. This mark up will describe the format of the text by using instructions to generate a final output in the way you want it to appear using the web browser. Generally, these instructions identify the elements such as headings, paragraphs, highlighted words, quoted texts, etc.

• Language – this means that you are using a language with all its syntax. Syntax is a set of grammatical rules and structural patterns that use appropriate words and symbols or for issuing commands, writing codes, etc. Take note that HTML is not like any other programming language that follows linear instructions based on different sets of rules.

HOW DOES HTML WORK?

•HTML consists of a short code called a “tag” typed into a text file. These tags are coding instructions embedded in the HTML document. The text is then saved as an HTML file and viewed through a web browser such as Internet Explorer, Mozilla Firefox, etc. the browser then translates those files into visible forms.

HOW DID HTML START?

• In 1989, a man named Tim Bernes-Lee proposed a Hyptertext document system to be used with the CERN community. CERN is the European organization for Nuclear Research; its members were scientists and physicists that were scattered around the world. Later in 1990, the system that Berners-Lee proposed was named the World Wide Web. During that year, he also developed the HTML Language. He the released the code to the internet in 1991.

HTML VERSION

• HTML 1.0 – it was the first release of HTML to the global internet community. Not may people were involved in the website creation at the time and the language was very limited.• HTML 2.0 – it was released in 1995, and this time included

everything in the previous version and added new features. This version was the standard for web design until January 1997 and defined many core HTML features for the first time.

• HTML 3.0 – this was initially a draft version that included several new capabilities and more powerful options for web page developers to create websites. Since it was a draft version, it was abandoned and later replaced by HTML Version 3.2. in January 1997, version 3.2 became the official standard.• HTML 4.0 – it was recommended in December 1997 by the

W3C (World Wide Web Consortium) to publish this version. HTML 4.0 provided new tags for style sheets, scripts, frames, embedded objects and more complex tables, more complex forms and improved accessibility features for people with disabilities. This became the official standard in April 1998.

• HTML5 – this is the newest version of HTML. It offers new features such as elements, attributes, event handlers and API (Application Programming Interface) for easier web application development and more sophisticated form handling. There are also new semantic elements for making up page content. HTML5 also introduced native audio and video playback to web pages.

WORKING WITH YOUR HTML FILE

• You don’t need any special tools to create your web pages in HTML. All you need is a text editor. You can use one of the simplest text editors already available in your computer, which is the Notepad. You may also try other text editors that can be downloaded from the internet.

CREATING YOUR FIRST HTML PAGE USING A NOTEPAD1. Place your mouse pointer on the lower left side of the

screen. Click the START screen when it appears.2. On the Start Screen, look for the Notepad application or just

type “Notepad.”3. Click Accessories the click NOTEPAD.

SAVING YOUR HTML FILE1. Once you have created your web page file in the notepad,

click the FILE menu and choose SAVE AS.2. When a dialog box appears, look for the SAVE AS TYPE

option and choose PLAIN TEXT or TEXT DOCUMENTS (*txt).3. Give the document the “.htm or .html” extension name. In

the Encoding option, choose UTF-8.4. Choose the folder and location in which to save the folder.5. Click SAVE.

UTF- 8• Unicode Transformation Format• The 8 means it uses 8-bit blocks to represent character.• It allows encoding a HTML file that is accepted in most web

browsers.• ASCII compatible (American Standard Code for Information

Interchange)• Easily supported by the most browsers.• Compact and Efficient for most scripts.• Easily processed, unlike other multi-byte encoding schemes.

VIEWING YOUR PAGE IN A BROWSER

• It is always best to know what your web page will look like when it is displayed in a browser. It is a good idea to view the page in several kinds of browsers since you don’t know which particular browser your visitors will b using and you should consider that different browsers don’t always render pages in exactly the same way.

HANDS ON EXERCISE: CREATING HTML USING NOTEPAD1. Launch Notepad.2. In the text area, type the following: “My First HTML Web

page in Notepad.”3. Save your file in your designated folder.4. Open the file in a web browser like ie, firefox or google

chrome.

TERMS TO REMEMBER• HTML – this stands for Hyper Text Markup Language• Syntax – this is a set of grammatical rules and structural

patterns that use appropriate words and symbols or for issuing commands and writing codes.• Tag – this is coding instructions embedded in the HTML

document.• UTF-8 – this stands for Unicode Transformation Format. It

allows encoding HTML file that is accepted in most web browsers.• CERN – this is the European Organization for Nuclear

Research. Its members were scientists and physicists who were scattered around the world.

ASSIGNMENT • On a one whole sheet of paper, write an evaluation and description of a given

website.

• The website that you will evaluate will be: http://naga.gov.ph/ (The Official Website of City of Naga)

• For your evaluation, you will evaluate and judge the overall components of the website with the following guide questions:

• What are the best features and functionalities of the website?

• Was the content being offered through the website, follows the proper web designing and planning? (Layout, Design, Structure and Overall Look)

• What changes or additional features would you suggest for this website?

Category Excellent(5) Very Good(4) Good(3) Fair(2) Needs Improvement(1)Structure Writing is excellently clear,

concise, and well organized with excellent sentence/paragraph construction. Thoughts are expressed in a coherent and logical manner.

Writing is clear, concise, and organized with excellent sentence/paragraph construction. Thoughts are expressed in a coherent and logical manner.

Writing is mostly clear, concise, and organized with good sentence/paragraph construction. Thoughts are expressed in a coherent and logical manner.

Writing is unclear and/or disorganized. Thoughts are not expressed in a logical manner.  

Writing is unclear and disorganized. Thoughts ramble and make little sense.  

Analysis (situation)

Effectively identifies a condition, a situation, or an issue that addresses the prompt. Insightful analysis conveys significance of the condition, situation, or issue.

Clearly identifies a condition, a situation, or an issue that addresses the prompt. Analysis conveys significance of the condition, situation, or issue.

Identifies a condition, a situation, or an issue but does not adequately address the prompt. Attempts to convey analysis.

Identifies a condition, a situation, or an issue but does not address the prompt. Lacks analysis.

Fails to identify a condition, a situation, or an issue of significance.

Depth of Reflection

Responses excellently demonstrate an in-depth reflection on, and personalization of, the theories, concepts, and/or strategies presented in the course materials to date. Viewpoints and interpretations are excellently insightful and well supported. Clear, detailed examples are provided, as applicable.

Responses demonstrate an in-depth reflection on, and personalization of, the theories, concepts, and/or strategies presented in the course materials to date. Viewpoints and interpretations are insightful and well supported. Clear, detailed examples are provided, as applicable.

Response demonstrates a general reflection on, and personalization of, the theories, concepts, and/or strategies presented in the course materials to date. Viewpoints and interpretations are supported. Appropriate examples are provided, as applicable. 

Response demonstrates a minimal reflection on, and personalization of, the theories, concepts, and/or strategies presented in the course materials to date. Viewpoints and interpretations are unsupported or supported with flawed arguments. Examples, when applicable, are not provided or are irrelevant to the assignment.

Response demonstrates a lack of reflection on, or personalization of, the theories, concepts, and/or strategies presented in the course materials to date. Viewpoints and interpretations are missing, inappropriate, and/or unsupported. Examples, when applicable, are not provided.