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

in burnsteem25 •  8 months ago  (edited)


1000227480.jpg
Basic concepts of HTML5

Hello!

Greetings to all members of the steemit community. It is with great pleasure I am participating in this week's engagement challenge, so fortunately I will be able to learn aloud about programming using HTML5 source code.

What an interesting topic. It's always been my pleasure to learn html coding, here is the opportunity for me to use and learn. I am much more interested in this topic that I will be putting in my best to progress as I can by the end of the teaching session. Let's begin.


Solution to homework


OptionsAnswers
1. Most frequent heading tag<h1>
2. paragraph tag used<p>
3. Image tag used< img >
4. Text color using CSS<color>
5. Linking CSS to HTML file file< link rel="stylesheet" href="styles.css">

Theoretical questions.

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

The <meta> element in the <head> of an HTML document provides metadata about the said document itself. This metadata is not displayed on the webpage but is rather used by search engines or browser to interpret and display content.

The <meta>element can be used to specify the character encoding of the document. This is important as it ensures that characters are displayed correctly in a web browser. Example include; <meta charset="utf-8">


Which are the main attributes used with the < input > element to create text fields, radio buttons, and check boxes in an HTML form? Give examples in each case

The main attributes used with the <input> element to create text fields, radio buttons, and checkboxes in an HTML form are

  • text: use to creates a single-line text field for entering text input. Example

<input type="text" name="username" placeholder="Enter your username">

1000227007.jpg

  • radio: Radio buttons are used to represent a group of options in which just one option can be selected at a time. Example

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

1000227008.jpg

  • checkbox: Checkboxes are used to represent options where multiple options can be selected.
    Example is

<input type="checkbox" name="confirm" value="yes"> I am not a robot

1000227009.jpg

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

Both <ul> and <ol> I used to create a list In a page, what difference between them is how they are represented on a page.

  • <ul>
    Here the list is unordered And represented using bullet points. The order of arrangement doesn't matter. For example, making a list for shopping.

  • <ol>
    Here the list is ordered And represented using numbers. This is in the case where the order of arrangement matters. For instance, making steps to carry out a cooking recipe.

Which is the purpose of the < form > tag element in HTML?Which are the important attributes to include in the < form > and what elements specify the method and action? example included.

The <form>tag Is used to create interactive forms which allows Data to be submitted to a web server.

To specify the method and action, this is what happens.

Method

This exists in two forms.

  • Get:. Used to retrieve data or taking actions that doesn't change the server data. For instance; search form.

<form method="get" action="/search">
<label for="search">Search:</label>
<input type="text" id="search" name="search_term">
<button type="submit">Search</button>
</form>

  • post: used to submit data ready to be processed by the server. Example include a login form.
What is a < fieldset > tag and what role does it play in an HTML form? Include an example.

The <fieldset> is used to group group related form data together. It organize the form elements making it user friendly. The <legend> could also be used in cooperation to form form captions for organized elements.

Examples include

<form method="post" action="/login">
<fieldset>
<legend>Login Details</legend>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit">Login</button>
</form>

Practical work

In this section I will be carrying out coding, which will involve creating two forms, and sharing the screenshots and source code below.

1000227134.jpgForm 1.

1000227146.jpg
Source code


1000227473.jpg
Form. 2

1000227481.jpg

1000227480.jpgSource code

To conclude, I will say it was fun working on this amazing topic as I have improved my skills on coding using HTML 5, just as a beginner. It wasn't that easy though but then from the help I got from the The page including this assignment, I was there learn a lot of things. Thanks to the team for opening an amazing challenge such as this one.

Now invite the following persons to join me participate.
@chant @wirngo and @fombae

Credit to: @rafk


Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Thank you, friend!
I'm @steem.history, who is steem witness.
Thank you for witnessvoting for me.
image.png
please click it!
image.png
(Go to https://steemit.com/~witnesses and type fbslo at the bottom of the page)

The weight is reduced because of the lack of Voting Power. If you vote for me as a witness, you can get my little vote.

Upvoted. Thank You for sending some of your rewards to @null. It will make Steem stronger.

Loading...

Greetings brother as a biggeners you try your best to add you answers. You work look fantastic I wish you more success with you HTML work. In future hope you are a good web developer. Let's try try again and do better.

Thanks bro. I will try my best.

I'm really sorry to see that you are out of club and your entry goes invalid which is very disappointing. Anyway don't feel bad and work hard for the next article. I'm waiting for your another impressive entry. Have a great day 😊