+2347067162698
tclassified.com@gmail.com

HTML Extended

Educational Technology and ICT

Created with Sketch.

HTML Extended

HTML stands for hypertext Mark up Language. it takes care of the structure of the web page while CSS takes care of the appearance of the web page. CSS stands for cascading style sheet. with HTML and CSS you can build a good looking web page

Write your first lines of HTML and CSS

<html>
   <head>
	<link rel="stylesheet" href="css/style.css
type="text/css">
   </head>
   <body>
   <h1>Hello my name is Augustine. Here is some HTML!</H1>

   </body>
</html>

style.css
h1{
   color:blue;
   background-color: yellow;
   font-family: sans-serif;
}

CREATE CONTENT USING HTML

DECORATE YOUR CONTENT WITH CSS
	h1{
	color:red;

QUIZ 

Distinguish between HTML and CSS and identify their uses
1. HTML is used to:
   a. Create content structure for web page  ** Answer
   b. Customise the appearance of a web page
   c. Add a database to a website
HTML, which stands for Hypertext Markup Language, allows you yo create content on a web page
including headers, paragraphs and more.

2. CSS is used to:
   a. Add a database to a website
   b. Deploy a website online
   c. Customize the appearance of a web page.  **  Answer
CSS, which stands foe Cascading Style Sheets, is code that lets you customize the
appearance of your HTML.

3. Which type of code is this?
   <h1>Subscribe to our newsletter</h1>
     a. HTML  **  Answer
     b. CSS
This is pure content (a heading), so it's HTML. If there were mention of colors, font styles,
etc., with a different syntax involving curly braces, it would be CSS.

4. Which of the following are used to define different elements in HTML?  
   a. Square brackets, ex. [h1][/h1]
   b. Tags, ex. <h1></h1>  **  Answer
   c. Curly braces, ex. {h1}{/h1}
You'll see tags everywhere in HTML! They start with a less-than sign, followed by the name of the tag,
 followed by a greater-than sign. A closing tag is the same, except it includes a forward slash.

5. What kind of code is this?

h1 {
    background-color: red;
    color: white;
    font-family: Helvetica;
}

   a. HTML
   b. CSS  ** Ans
In CSS, you select an element (in this case, h1, which is a heading), and adapt its appearance
 via properties and values within a set of curly braces. You'll see much more of this later in the course!

6. What would the following code combination look like on a web page?

HTML:
<p>The quick brown fox jumps over the lazy dog.</p>

CSS:
p {
    color: white;
    background-color: green;
}

   a. White text that reads "The quick brown fox jumps over the lazy dog." on a green background  ** Ans

   b. Green text that reads "The quick brown fox jumps over the lazy dog." on a white background.

   c. The code is invalid, so nothing will show.
A <p> element (paragraph) is created in HTML. Its appearance is changed to have a green background color and white text color via CSS.

7. Writing good HTML with the proper tags and structure helps which of the following present your content accurately?

Careful, there are several correct answers.

   a. Browsers ** Ans
   b. Databases
   c. Screenreaders ** Ans
   d. Search engines  ** Ans
Non-human entities like browsers, search engines, and screenreaders rely on clean HTML to be able to present content consistently on the web.

8. Why is it beneficial to consider content and its appearance as two separate concerns?
   a. It's not.
   b. Because HTML and CSS have no relationship to one another.
   c. Because this allows either one to change without the other being affected. ** Correct Ans.
As a coder, you'll often want to change content without changing its purely aesthetic appearance (i.e., change the exact wording of a paragraph without
 changing the fact that the text is pink) or vice versa (i.e., change the color of a paragraph without changing its actual wording). 
Separating content from appearance allows you to think independently about these two concepts.

CREATING HEADINGS FOR STRONG WEB PAGE STRUCTURE
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

ADD TEXT IN PARAGRAPHS
<h1>Polar bear</h1>

<p>From Wikipedia, the free encyclopedia</p>

<p>The polar bear (Ursus maritimus) is a carnivorous bear whose native range lies largely within the Arctic Circle, encompassing the Arctic Ocean,
 its surrounding seas and surrounding land masses. It is a large bear, approximately the same size as the omnivorous Kodiak bear (Ursus arctos middendorffi).
[3] A boar (adult male) weighs around 350–700 kg (772–1,543 lb),[4] while a sow (adult female) is about half that size. 
Although it is the sister species of the brown bear,[5] it has evolved to occupy a narrower ecological niche,
 with many body characteristics adapted for cold temperatures, for moving across snow, ice and open water, 
and for hunting seals, which make up most of its diet.[6] Although most polar bears are born on land,
 they spend most of their time on the sea ice. Their scientific name means "maritime bear" and derives from this fact. 
Polar bears hunt their preferred food of seals from the edge of sea ice, often living off fat reserves when no sea ice is present. 
Because of their dependence on the sea ice, polar bears are classified as marine mammals.[7]</p>


<p>Because of expected habitat loss caused by climate change, the polar bear is classified as a vulnerable species, 
and at least three of the nineteen polar bear subpopulations are currently in decline.[8] However, 
at least two of the nineteen subpopulations are currently increasing, while another six are considered stable.[9]
 For decades, large-scale hunting raised international concern for the future of the species,
 but populations rebounded after controls and quotas began to take effect.[10] For thousands of years,
 the polar bear has been a key figure in the material, spiritual, and cultural life of circumpolar peoples,
 and polar bears remain important in their cultures. Historically, the polar bear has also been known as the white bear.[11]</p>

<h2>Naming and etymology</h2>

<p>Constantine John Phipps was the first to describe the polar bear as a distinct species in 1774.[1]
 He chose the scientific name Ursus maritimus, the Latin for 'maritime bear',[12] due to the animal's native habitat. 
The Inuit refer to the animal as nanook (transliterated as nanuq in the Inupiat language).[13]
[14] The Yupik also refer to the bear as nanuuk in Siberian Yupik.[15] The bear is umka in the Chukchi language. 
In Russian, it is usually called бе́лый медве́дь (bélyj medvédj, the white bear), 
though an older word still in use is ошку́й (Oshkúj, which comes from the Komi oski, "bear").[16] In Quebec, 
the polar bear is referred to as ours blanc ("white bear") or ours polaire ("polar bear").[17]
 In the Norwegian-administered Svalbard archipelago, the polar bear is referred to as Isbjørn ("ice bear").</p>

<p>The polar bear was previously considered to be in its own genus, Thalarctos.[18] However,
 evidence of hybrids between polar bears and brown bears, and of the recent evolutionary divergence of the two species, 
does not support the establishment of this separate genus, and the accepted scientific name is now therefore Ursus maritimus, 
as Phipps originally proposed.[1]</p>

STRENGTHEN AND EMPHASIZE TEXT
<h1>polar bear</h1>

<p>From Wikipedia, the free encyclopedia</p>

<p>The <strong>polar bear</bear> 
<em>(Ursus maritimus)</em> is a carnivorous bear whose native range lies largely within the Artic Circle. it is a large
bear approximately the same size as the omnivorous Kodiak bear <em>(Ursus arctos middendorffi).</em>

ADD LINKS AND UNDERSTAND ATTRIBUTES
<p>Although most polar bears are born on land, they spend most of their time on the 
<a href="https://enwikipedia.org/wiki/sea_ice">sea ice</a>. Their scientific name means "maritime bear" and derives from this fact.</p>

ORGANIZE ELEMENT IN A LIST.

<h1>Fruits</h1>
<ul>
    <li>Bananas</li>
    <li>Blueberries</li>
    <li>Strawberries</li>
    <li>Apples</li>
    <li>Raspberries</li>
    <li>Kiwis</li>
    <li>Pineapples</li>
</ul>

ADD IMAGES TO YOUR WEB PAGE
<img src="https://upload.wikimedia.org/wikipedia/commons/7/77/NASA-MHughes-Fulford.JPG" alt="Astronaut Millie Hughes-Fulford displays the modernist Blackburn & Danne NASA logotype.
 " title="Millie Hughes-Fulford">
LOADING IMAGE DIRECTLY ONLINE
src="https://upload.wikimedia.org/wikipedia/commons/7/77/NASA-MHughes-Fulford.JPG"

LOADING IMAGE DIRECTLY ON YOUR SYSTEM FILE
src="images/NASA-MHughes-Fulford.JPG"

QUIZ
Question 1. 
Which of these is not a legitimate HTML tag?
   A. <p>
   B. <li>
   C. <h8>  ** Ans
   D. <img>
Heading tags go from 1-6: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

Question 2. 
Which of the following attributes can images in HTML have?
Careful, there are several correct answers.
   A. src   ** Ans
   B. title ** Ans
   C. alt   ** Ans
   D. p
   E. href
Images should have at least a src  and  alt  tag. A title  is also useful. 

Question 3. 
Which is the correct order of tags in a list?


A. <li>
    <ol>Item 1</ol>
    <ol>Item 2</ol>
    <ol>Item 3</ol>
</li>

B. <ol>         ** correct answer
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

C. <ol>
    <ol>Item 1</ol>
    <ol>Item 2</ol>
    <ol>Item 3</ol>
</ol>
Open up your list with either <ul> or <ol> tags and fill it with list items via the <li> tag.

Question 4. 
Which are good practices for adding images to HTML?
Careful, there are several correct answers.

   A. Only use images to which you have the intellectual property rights.  ** Answer

   B. Keep your image sizes as small as possible to help pages load faster. ** Answer

   C. Use the appropriate file format for the image you're using.           ** Answer

   D. Save images at the actual size you want them displayed on your web page.  Wrong

Question 5.
What is the result of the following code?

<h1>5 great tips for your next vacation</h1>
<p>It's important to take time off. Check out our tips for your next vacation.</p>
<ol>
    <li>Book tickets well in advance.</li>
    <li>Pack lightly.</li>
    <li>Stay flexible in case of airport delays.</li>
    <li>Save money by preparing one simple meal per day in your hotel room or Airbnb.</li>
    <li>Take lots of pictures to savor your memories!</li>
</ol>
 The above code shows an <h1> heading (the largest of all heading options, from h1-h6), a paragraph line, and an ordered list containing 5 list items.

Question 6. 
Which of these links is written correctly?

   A. <a href=https://openclassrooms.com>OpenClassrooms</a>

   B. <a href="https://openclassrooms.com">OpenClassrooms</a>   ** Answer

   B. <a><href="https://openclassrooms.com">OpenClassrooms</a>
The href attribute is set in an <a> tag and sets the URL to which the link should go. It should be written inside quotation marks (like all attributes).

Question 7.
Which code snippet for an image is written using best practices?

   A. <img src="images/logo.png">

   B. <img href="images/logo.png" alt="The OpenClassrooms logo" title="logo">
 
   C. <img src="images/logo.png" alt="The OpenClassrooms logo" title="logo">   ** Answer
 
   D. <img source="images/logo.png" title="logo">

<img> tags should contain src, alt, and title attributes. Src contains the file path to the image, 
alt contains an alternative description of the image in case the image cannot be seen, and title is 
simply a text that will display as a tooltip when a user hovers over the image.


Question 8. 
Which image file format would be best for a photo of a grassy landscape with black and white goats grazing amidst red flowers?

   A. JPEG  ** Answer

   B. GIF

   C. PNG

   D. SVG

The JPEG file format is great for digital photographs because it can display millions of colors, have a relatively small file size, 
and transparent pixels aren't necessary for these types of images (if they were, you'd use a PNG image instead).

Question 9.
Which of the following code is properly indented?
A. <ul>
    <li>Item 1</li>
        <li>Item 2</li>
            <li>Item 3</li>
                </ul>
B. <ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

C. <ul>   **  Answer
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<h1>Structural HTML tags</h1>
<header>
    <!--content-->
</header>

<nav>
    <!--content-->
</nav>

<section>
    <!--content-->
</section>

<article>
    <!--content-->
</article>

<footer>
    <!--content-->
</footer>


...............................................................
html structure main

layout.html

<link rel="stylesheet" href="css/styles.css">

<header>
  header
</header>
<nav>
   nav
</nav>
<section>
  section
  <article>article</article>
  <article>article</article>
</section>
<footer>
  footer
</footer>
.....................................................
style.css

* {
  color: #fff;
  font-family: sans-serif;
  font-size: 32px;
  text-align: center;
}

header, nav, section, article, footer {
  padding: 50px;
}

header {
  background-color: #2DF3F4;
}

nav {
  background-color: #28F186;
}

section {
  background-color: #FC6486;
}

article {
  background-color: #65F34A;
  margin: 20px;
}

footer {
  background-color: #9EF33A;
  padding: 50px;
}

........................
forms

register.html

<form action="action_page.php">
  <div class="container">
    <h1>Register</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" id="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
    <hr>

    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
    <button type="submit" class="registerbtn">Register</button>
  </div>

  <div class="container signin">
    <p>Already have an account? <a href="#">Sign in</a>.</p>
  </div>
</form>

................................
css

* {box-sizing: border-box}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}

....................
application form

<html>
    <head>
        <link rel="stylesheet" href="css/form.css">
        <title>Application</title>
    </head>
    <body>
        <form action="action_page.php">
            <div class="container">
            <h1>Application Form</h1>
            <p>Please fill in this form to apply for the job.</p>
            <hr>

            <label for="fname">First name:</label><br>
            <input type="text" id="fname" name="fname"><br>
            <label for="lname">Last name:</label><br>
            <input type="text" id="lname" name="lname">

                
            <br>
            <label for="address">Address:</label><br>
            <textarea name="message" rows="10" cols="30">
               Address.
            </textarea>

            <br>
            <label for="phonenumber">Phone Number (080....):</label>
            <input type="number" id="phonenumber" name="phonenumber">

            <br>
            <label for="birthday">Birthday:</label>
            <input type="date" id="birthday" name="birthday">

            <br>
            <label for="myfile">Resume or CV, Select a file:</label>
            <input type="file" id="myfile" name="myfile">

            <br>
            <label for="email"><b>Email</b></label>
            <input type="text" placeholder="Enter Email Here" name="email" id="email" required>
        
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
        
            <label for="psw-repeat"><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>

            <label for="gender"><b>Choose a Gender:</b></label><br>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label><br>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label><br>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>

            <br>
            <br>

            <label for="course"><b>Choose a Course:</b></label><br>
            <input type="checkbox" id="course1" name="course1" value="Programming">
            <label for="course1"> Programming</label><br>
            <input type="checkbox" id="course2" name="course2" value="Computer Operations">
            <label for="course2"> Computer Operations</label><br>
            <input type="checkbox" id="course3" name="course3" value="Graphics">
            <label for="course3"> Graphics</label>

            <br>
            <br>

            <label for="state"><b>Choose a State:</b></label>
            <select id="state" name="state">
            <option value="Abia">Abia</option>
            <option value="Ogun">Ogun</option>
            <option value="Kano">Kano</option>
            <option value="Rivers">Rivers</option>
            </select>

            <hr>
        
            <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
            <button type="submit" class="registerbtn">Apply</button>
            </div>
        
            <div class="container signin">
            <p>Already have an account? <a href="#">Sign in</a>.</p>
            </div>
        </form>
</body>

</html>
  ........................................
Login Form

<html>
    <head>
        <link rel="stylesheet" href="css/form.css">
        <title>Login</title>
    </head>
    <body>
        <form action="action_page.php" method="post">
        <div class="imgcontainer">
            <img src="img_avatar2.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>

            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <button type="submit">Login</button>
            <label>
            <input type="checkbox" checked="checked" name="remember"> Remember me
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" class="cancelbtn">Cancel</button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
        </form>

</body>

</html>

..............................
form.css

* {box-sizing: border-box}

/* Add padding to containers */
.container {
  padding: 16px;
}

h1 {
  color: blue;
  background-color: white;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Overwrite default styles of hr */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.registerbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

.registerbtn:hover {
  opacity:1;
}

/* Add a blue text color to links */
a {
  color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
  background-color: #f1f1f1;
  text-align: center;
}
..........................
html elements
..............................
<h1>Text to Draw Attention to</h1>

<abbr title="A much longer description">Something Abbreviated</abbr>

<acronym title="as soon as possible">ASAP</acronym>

<b>I Want this to be Bold</b>

<big>This is going to be Big</big>

<blockquote>Indent me and show I'm important</blockquote>

<center>Center Me Please</center>

<em>I like Being Italicized</em>

<i>I like being Italicized too</i>

<p>This is a big paragraph. Really, it is!</p>

<q>You can quote me on that</q>

<s>I've been struck</s>

<small>I feel so small</small>

<strong>I'm the strongest</strong>

<sub>I'm Subscript</sub>

<sup>I'm Superscript</sup>

<img src="images/pic1" height="415" width="300"/>

<dl>

<dt>Bicycle</dt>

<dd>- Has two Wheels</dd>

<dt>Car</dt>

<dd>- Has Four Wheels</dd>

</dl>

<ol>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ol>

<ul>

<li>Car</li>

<li>Truck</li>

<li>Bicycle</li>

</ul>

...........................................
CSS Padding
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
.................................
The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

Leave a Reply

Your email address will not be published. Required fields are marked *

Open chat