lab5

Leveraging Web Data Class 5 Lab

Web Development Resources

W3 HTML Resources
W3 CSS Resources
W3 JavaScript Resources
Questions and Answers

Change the text of the title tag in the head section to your name.
<title>My name is qaisar</title>

Describe the three components of the HTML document (HTML, CSS, JavaScript).

<head></head> : The head section mainly contains the title of the page and the main heading, sometimes it also contains an image to be displayed with heading.
<body></body> : The body section contains the visible part of the page like paragraph tag or the ordered/unordered lists, it can also contain images.
<footer></footer> : the footer section mainly contains the copyrights text, it also contains navigation tag to point to different pages.

Name and describe four distinct HTML tags.

<p></p> :  the paragraph tag is used to insert your text into the page.
<nav></nav> :  navigation tag is used to put navigation in your page e.g  to link it to other pages
<div></div> : div  tag is also known as the division tag. It kind of divide the code into small sections or blocks and also help is the css for specifying the div.
<title></title> : title tag is used to give a titleto the page. The given title does not appear inside the page but on the top of the browser window

Identify an HTML tag that does not require an end tag.

<img> image tag does not require an end tag

Read this page on CSS Syntax then name and describe element selectors, id selectors, and class selectors.

We use element selector to adjust our elements in a certain page during css based on the element name. E.g when we use
p {
    text-align: center;
    color: red;
} 
We are calling all the p elements to be colored red and center aligned.
We use id selector to give a unique id to specific element and then we use that id in css it is only for that specific element which has that id. We use # character followed by the id of the elemet to call that element 
#para1 {
    text-align: center;
    color: red;
} 
The class selector is used to select an element with a specific class attribute. The class selector uses a period (.) which is followed by the name of the class.
.center {
    text-align: center;
    color: red;
} 
We are calling all the elements with class center to be colored red and center aligned.

Change the color of the text in all '<p>' tags. Describe how you did it. Color must be clear and discernable from the white background.

I will just use the element selector to change the color of the text in my <p> tags. 
 p {
    text-align: center;
    color: rgb(0, 0, 0);     
    }                 // (color: black ; can also be used)
This will give black color to all my text which is in the white background.

Create an HTML button between this tag and the '<br>' tag below. Add custom text to the button and style the button.
  
  <a href="https://www.wikipedia.org/"><button>Wikipedia</button></a>