Lab for Fundamental of Web Technology @lab4fundofwebtech - Tumblr Blog

LAB #9: HTML Styles: CSS

INFORMATION

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS can be added to HTML elements in 3 ways:

Inline - by using the style attribute in HTML elements

Internal - by using a <style> element in the <head> section

External - by using an external CSS file

#lab 9 #html style #css

LAB #8: HTML div, dl, dd, and dt tags

INFORMATION

The <div> tag defines a division or a section in an HTML document.

The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

The <dt> tag defines a term/name in a description list.

The <dt> tag is used in conjunction with <dl> (defines a description list) and <dd> (describes each term/name).

#lab 8 #HTML div dl dd and dt tags

LAB #7: HTML Radio & Checkbox

INFORMATION

HTML Forms

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.

There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax –

#lab 7

LAB #6: HTML Forms

INFORMATION

HTML Forms

HTML Forms are required when you want to collect some data from the site visitor. For example, during user registration, you would like to collect information such as name, email address, credit card, etc.

There are various form elements available like text fields, text area fields, drop-down menus, radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has the following syntax –

INSTRUCTION

1. By using Notepad, type the following text:

<!DOCTYPE html> <html> <body> <h2>LAB-06 HTML Forms</h2> <form action="/action_page.php"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value=""><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value=" "><br><br> <input type="submit" value="Submit"> </form> <p>If you click the "submit" button, the form-data will be sent to a page called "/action_page.php".</p> </body> </html>

QUESTIONS

1. Explain about the HTML code above.

2. Write a HTML code to display the output as show as Figure Q2 on the webpage.

ANSWER

1.

<input> is an attribute. Type=”” specify the value of data. For example, type=”text” displays a single-line text input field. name=”” is the identifier that is sent to the server when the form is submitted.id=”” is a unique identifier for the browser for javascript and such.

For example, id="fname” is for last name. value=”” is used to display a temporary data. Label is used to name the input itself.

2. <!DOCTYPE html>

<html>

<body>

<h2>LAB-06-Q2 HTML Forms</h2>

<label for="fname">First name:</label><br>

</form>

</body>

</html>

#lab 6 #HTML forms

LAB #5: TCP/IP

INSTRUCTIONS

Investigate all questions below using the computer in front of you and print screen your answers.

LAB #4: HTML Colors & Lists

INFORMATION

Colors are defined using a hexadecimal notation for the combination of red, green, and blue color values (RGB). The lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF).

Only 16 color names are supported by the W3C HTML 4.0 standard (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow).

HTML provides a simple way to show unordered lists (bullet lists) or ordered lists (numbered lists).

#lab 4 #html colors & lists

Lab #3: INTRODUCTION TO HTML TAG

INFORMATION

HTML tags are used to mark-up HTML elements:

HTML tags are surrounded by the two characters < and >

The surrounding characters are called angle brackets

HTML tags normally come in pairs like <b> and </b>

The first tag in a pair is the start tag, the second tag is the end tag

The text between the start and end tags is the element content

HTML tags are not case sensitive, <b> means the same as <B>

CODE GIVEN:

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<p>Welcome to my first web page. <br>I am writing this page using a text editor and plain old html.</p>

<h1 align="center">My First Webpage</h1>

<p>Welcome to my first web page. <br>I am writing this page using a text editor and plain old html.</p>

<p>By learning html, I'll be able to create web pages like a pro... <br>

which I am of course.</p>

</body>

</html>

OUTPUT OF THE CODE:

EXPLANATION:

The code starts with <html> and ends with </html>.

The tag <head> contains the information of the code such as the title of the webpage, the code for the appearance of the webpage which is the CSS, the font you want to use in the webpage, and so on. This information is not visible to the users. It ends with </head>.

<title> tag is for the name of the webpage which in this case is My first Webpage. It ends with </title>.

The <body> part represents the visible part of the code. <h1> means header 1 which is “My First Webpage” which is aligned to the centre of the page by using code align=“center”.

The <p> here means paragraph. <br> in the between text is for new line. The paragraph ends with </p>.

The body ends with </body> and the code ends with </html>

There two types of HTML tags:

1. Associated tags.

Paired tags have an opening and closing tag. The opening tag is similar to the single <h1> tag, and the closing has the first slash </h1>, between them write content (text, images or other) and for this they are called containers.

2. Singular tags.

A tag is defined to be a singular tag when there is no closing tag for it or a tag is considered a singular tag when there is no companion tag.

Some examples of HTML tags on both types of HTML tags.

1. Associated tags.

<b> …</b> = for bold the text

<h1> …. </h1> = for header

<div> … </div> = for division or section

2. Singular tags.

<br> = for new line

<hr> = for horizontal rule

<!--> = for comment

#lab 3 #introduction to html tags

Lab #2: Introduction to HTML

HTML is a format that tells a computer how to display a web page. The documents themselves are plain text files with special "tags" or codes that a web browser uses to interpret and display information on your computer screen. HTML stands for HyperText Markup Language. An HTML file is a text file containing small markup tags. The markup tags tell the Web browser how to display the page. An HTML file must have an htm or html file extension.

Example of HTML codes:

<html>

<head>

<title> My first Webpage. </title>

<\head>

<body>

This is my first homepage. <b>This text is bold </b>

</body>

</html>

Result:

Questions:

1. Explain the HTML code above.

The code starts with <html> and ends with </html>.

The tag <head> contains the information of the code such as the title of the webpage, the code for the appearance of the webpage which is the CSS, the font you want to use in the webpage, and so on. This information is not visible to the users. It ends with </head>.

<title> tag is for the name of the webpage which in this case is My first Webpage. It ends with </title>.

Next is the <body> tag. Users can see the output from code in <head> tag and information in this tag. In this text, the information displayed is “This is my first homepage. This text is bold”.

As we can see, the sentence “This text is bold” is in bold. This is due to tag <b> which is used in bold words. The tag ends with </b> or else, the whole following text would be in bold.

It is important to end the tag with backslash “\” in front of the name of the tag (<\tagname>). Without this, the html will not work perfectly.

2. Why the use of HTM or HTML Extension?

HTM and HTML extensions are the same HTM files. The difference between them is that HTM is used as an alternative to .HTML for a few operating systems and servers which cannot support four-letter extensions. Nevertheless, in today’s architecture, operating systems can accept long file names and four-letter file extensions.

3. How to View HTML Source?

HTML source code of a page can be viewed by clicking CTRL + U. If you want to see only certain element or codes, you can right-click and click on inspect element.

#lab 2 #introduction to html

Lab #1: INTRODUCTION TO THE WEB TECHNOLOGY

History of Web Technology

In this post, I will talk about the “History of Web Technology”.

The first web browser — The WorldWideWeb browser

The first web browser was called WorldWideWeb. It was developed in 1990 by Tim Berners-Lee for the NeXT Computer.

Tim Berners-Lee

It was the only available option to surf the web. In March 1991, Berners-Lee introduced the site to his colleagues at CERN. Later on, the browser changed its name to Nexus to steer clear of confusion between the program itself and the abstract information space.

The first website — World Wide Web

The first website was also associated with the first web browser — so it was called World Wide Web. The web was launched on 6th August 1991 by the founder of the first web browser, Tim-Berners-Lee for the World Wide Web project. The website was dedicated to sharing information about the project itself. The website highlighted how to create a Website and described hypertext.

The address of the first website was http://info.cern.ch/hypertext/WWW/TheProject.html. Unfortunately, there is no screenshot of the original website.

The closest copy to the original page.

Reference:

Tim Berners-Lee: WorldWideWeb, the first Web client. (2021). W3.org. https://www.w3.org/People/Berners-Lee/WorldWideWeb.html#:~:text=The%20first%20web%20browser%20%2D%20or,World%20Wide%20Web%20with%20spaces).

Shontell, A. (2011, June 29). FLASHBACK: This Is What The First-Ever Website Looked Like. Business Insider; Business Insider. https://www.businessinsider.com/flashback-this-is-what-the-first-website-ever-looked-like-2011-6#:~:text=The%20first%20web%20page%20went,%2FWWW%2FTheProject.html.

‌

#lab1 #history of web technology

Trending Blogs

Recently Viewed Blogs

Lab for Fundamental of Web Technology