lab4fundofwebtech - Tumblr blog

lab4fundofwebtech · 4 years ago

Text

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

INSTRUCTION

1. By using Notepad, type the following text:

Example 1

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color: powderblue;} h1 {color: blue;}

p {color: red;}

</style>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Example 2

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

QUESTIONS

Explain about the HTML code above.

What is the difference between Example 1 and Example 2?

ANSWERS

1. under <style> css is put.CSS is used to set the background colour and the color of text. h1 is used for the text “This is heading” and set to blue color (color:blue;). p is used for the text “This is a paragraph” and set to red color (color:red;)

2. The difference between Example 1 and Example 2 are the background color of example 1 is blue while example 2 is white. The color of text also set up the texts are set to red and blue.

#lab 9 #html style #css

0 notes

lab4fundofwebtech · 4 years ago

Text

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).

INSTRUCTION

1. By using Notepad, type the following text:

<!DOCTYPE html>

<html>

<body>

<h3> The div dl, dd, and dt elements </h3>

</div>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

<dd>White cold drink</dd>

</dl>

</body>

</html>

1. Explain about the HTML code above,

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

ANSWER:

1.

<h3> is used as the heading of title (The div, dd, and dt elements).

<p> is used as paragraph.

<div style=”” is used to decorate the division or section of the title (The div, dd, and dt elements). The background color is set up as light blue.

2.

<!DOCTYPE html>

<html>

<body>

</div>

<dl>

<dt>Coffee</dt>

<dd>Black hot drink</dd>

</div>

<dd>White cold drink</dd>

</dl>

</div>

</body>

</html>

#lab 8 #HTML div dl dd and dt tags

0 notes

lab4fundofwebtech · 4 years ago

Text

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 –

INSTRUCTION

1. By using Notepad, type the following text:

<!DOCTYPE html>

<html>

<body>

<h3> Example1 : Radio Button Input </h3>

<input type="radio" name="gender" value="female"> Female<br>

<h3> Example2 :Input Type Checkbox </h3>

</body>

</html>

Output:

QUESTIONS:

1. Explain the HTML code above. 2. Write an HTML code to display the output as shown in Figure Q2 on the webpage.

ANSWERS:

1. Type in <input type=”radio”> means a radio button. The button only lets one number of choices.

<input type=”checkbox”> defines a checkbox. Users can select zero or more options number of choices.

2.

<!DOCTYPE html>

<html>

<body>

<h3> Exercise </h3>

<input type="radio" name="color" value="black"> Black

<input type="radio" name="color" value="White"> White

<input type="radio" name="color" value="green"> Green

<input type="radio" name="size" value="small"> Small

<input type="radio" name="size" value="large" checked> Large

</body>

</html>

#lab 7

0 notes

lab4fundofwebtech · 4 years ago

Text

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

0 notes

lab4fundofwebtech · 4 years ago

Text

LAB #5: TCP/IP

INSTRUCTIONS

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

1. How to check your computer IP address? Give me several ways on how to do it.

Answer:

(1) Using network connections setting:

1. Go to Start Menu and click right-click. Choose ‘Network Connections’ setting:

0 notes

lab4fundofwebtech · 4 years ago

Text

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).

CODE GIVEN

<html> <head> <title>My First Webpage</title> </head> <body bgcolor="#EDDD9E"> <h1 align="center">My First Webpage</h1> <p>Welcome to my <strong>first</strong> webpage. 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> Here's what I've learned: <ul> <li>How to use HTML tags</li> <li>How to use HTML colours</li> <li>How to create Lists</li> </ul> </body> </html>

QUESTIONS

1. Explain about 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>.

The <body> part represents the visible part of the code. The background is colored with HEX code #EDDD9E using <body bgcolor="#HEX">. <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>.

<ul> here means unordered list. Here means, the following list will be in bullet form. The list will be in <li> tag and ends with </li>. The end of the list will be having </ul> tag.

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

1. Change the given HTML code by using an ordered list tags.

<html>

<head>

<title>My First Webpage</title>

</head>

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

<p>Welcome to my <strong>first</strong> webpage. 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> Here's what I've learned:

<ol>

<li>How to use HTML colours</li>

<li>How to create Lists</li>

</ol>

</body>

</html>

3. List 10 colours HEX value in HTML codes.

Black - #00000

White - #FFFFF

Red - #FF0000

Green - #00FF00

Blue - #0000FF

Yellow - #FFFF0

Cyan - #0FFFF

Magenta - #FF00FF

Violet - #EE82EE

Orange - #FFA500

4. Provide a HTML code for definition lists.

<html>

<head>

<title>My First Webpage</title>

<style>

dl {

display: block;

margin-top: 1em;

margin-bottom: 1em;

margin-left: 0;

margin-right: 0;

}

</style>

</head>

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

<p>Welcome to my <strong>first</strong> webpage. 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> Here's what I've learned:

<dl>

<dd>How to use HTML colours</dd>

<dt>How to create Lists</dt>

</dl>

</body>

</html>

#lab 4 #html colors & lists

0 notes

lab4fundofwebtech · 4 years ago

Text

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

0 notes

lab4fundofwebtech · 4 years ago

Text

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

0 notes

lab4fundofwebtech · 4 years ago

Text

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

1 note · View note