Sec S19W1 || Creation of an Interactive Website (Basic concepts of HTML5)

josepha (77)in #dynamicdevs-s19w1 • 10 hours ago

_canvas

_{While growing up I fell in love with computer science and my dream goal was to become a programmer, however, things happened along the line during my days in secondary which I switched from being a science student to a commercial student. After some years I was admitted into a higher institution where I studied accounting there after my zeal for programming came back I had no option but to run for a diploma in programming.}

_{Too many things in my head that made me pause the program after learning about front-end design, which today I will be exploring knowledge here based on the lecture given by @kouba01 which I find interesting.}

Quiz: Answer

b) <h1>
b) <p>
b) <img>
b) color
a) <link rel="stylesheet" href="styles.css">

Theoretical Questions:

What is the function of the <meta> element in the <head> of an HTML document? Give an example of use.

The <meta> element in the <head> of an HTML document is what provides metadata about the HTML document. The data that describes all other data is what is known as Metadata. The use of <meta> is to specify the description of the author of the document, keywords in the document, and so on. The elements are displayed by the use of a browser which tells how the page will be reloaded or displayed etc.

Below are some examples of the use of <meta> elements.

Character Set Declaration:

josepha meta2.PNG

It is used for character set declaration: it defines the character of a document which you can see from the screenshot above.

Viewport:
jospha meta3.PNG

It is used to control layouts on those who are using mobile phones to browsers.

Page Description:
josepha meta8.PNG

This is used to describe the content of the page, which is mainly used by search engines for showing (displaying) snippets.

Keywords:
josepha meta5.PNG

This is the <meta> element that provides you with a list of keywords that are related to each other on a page.

Author:
josepha meta6.PNG

This is the <meta> element that is used to specify the author in a document.

Refresh:
josepha meta7.PNG

This is the <meta> element that is used to refresh the page automatically after some certain time.

josepha meta1.PNG

The screenshot below is a simple example of a < head > of an HTML with many <meta> tags on it.

What are the main attributes used with the < input > element to create text fields, radio buttons, and checkboxes in an HTML form? Give an example for each.

The main attribute used with the < input > element in HTML is to create the following under listed:

Text fields
Radio buttons
Checkboxes

All of these are in an HTML form, and each of them uses a separate attribute to specify their behavior and types.

Text field:
This is used when you want to create a single-line input.

Josepha form.PNG

Main attributes: type="text", name, value, placeholder, max length, size

Radio Button:
You can use this when you want to create a radio button, that will permit your users to select one option out of the given options you have configured in the form set.

josepha form1.PNG

Main attributes: type="radio", name, value, checked
html

Checkbox:
This is what allows you to create a checkbox, that will permit your users to select one or multiple options in the list of options you have configured.

josepha form3.PNG

Main attributes: type="checkbox", name, value, checked
html

Examples of allow we have said here

The value attractive allows you to specify the value that is related to the input.
The Additional attributes such as size placeholder, and others help to make the appearance look good.
The name attribute is for referencing the information in the form.
Type attribute tells the type of input.

Explain the difference between <ul> and <ol> elements. When would you use each of them?

The <ul> and <ol> elements are both used to create lists in HTML, but they serve different purposes and have the same characteristics but are arranged in different ways:

Unordered List `<ul>`:

This can be used when you want to create a list of items in no particular order and the items are usually marked with bullets (•), which you can use CSS and adjust the appearance.

josepha list2.PNG

You can use this when the items are unordered or if the items don't matter to be given a number, which for example in this HTML file we make use of fruits such as Mango, Guvea, and Apple.

Ordered List `<ol>`:

josepha list.PNG

It is used to create a list of items where order is not needed. The items will appear and be marked with numbers beginning with 1, 2, 3, or with letters a,b,c......

Main Differences Between `<ul>`and `<ol>` elements

Key points	`<ul>`	`<ol>`
Order	unordered	ordered
Markers	uses bullets by default	uses numbers by default
Use case	use lists where the order is not significant	use lists where the order matters

When to use them

I can use them for the following

To set choices or options
Grocery list
To list products page of list features

What is the purpose of the <form> element in HTML? What are the important attributes to include in the <form> element to specify the method and action? Give an example.

The purpose of the <form> element in HTML is to create a means that you can collect user information (data). The form element acts as a container for various types of input controls for example:

Text fields
Checkboxes
Radio buttons
Submit buttons

All these are what allow users to enter and submit information.

Important Attributes in a form `<form>` Element:

Action:
This is what specifies the URL where the form data should be sent for processing.

Method:
This is what makes the HTTP method have a meaning that is used for sending imputed information. GET and POST are the two most common methods and actions.

GET: This is used for retrieving information.

POST: This is used for submitting data that will change the server like updating the information.

josepha form attribute.PNG

The above screenshot is an example of the attributes of an HTML form.

What is a <fieldset> tag and what is its role in an HTML form? Include an example in your answer.

A <fieldset> tag in HTML is the tag that is used to group elements that are related to a form. The tag is used along with the <legend> tag which can be seen in the screenshot which is an example.

josepha fieldset.PNG
josepha fieldset1.PNG Result view in browser

Take a screenshot of your completed form in the browser. Share the screenshot and HTML source code on Steemit in your entry post.

After everything that I have learned from the beginning of the lesson I then put the knowledge into practice which shows the results below.

josepha reg.PNG
Browser View

josepa source code.PNG Source code gotten from web browser

I already have Visual Studio on my laptop which was easy for me to run. However, before I began running the HTML code, I started by creating a folder for the file which I then gave it a name and input all the necessary information as shown from the source code.