HTML & CSS

  • Websites are created and designed using HTML and CSS.
  • It is the HTML that is used to construct the design of a webpage, and it is the CSS that makes it look beautiful.

Understanding Web Development

A website is made up of multiple web pages. Each web page contains:

  • Text
  • Images
  • Links
  • Lists
  • Buttons
  • Background designs

To create these elements properly, we use HTML and CSS.

  • HTML builds the structure of the webpage.
  • CSS improves the appearance and design of the webpage.

You can think of HTML as the structure of a building and CSS as the paint and decoration that make it attractive.

HTML Elements

  • Tags are used in making an HTML element.
  • Tags inform the browser on how to behave.

Most tags have:

  • An opening tag
  • Content
  • A closing tag

Example:

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

Anchor Tag (A)

The <a> tag is referred to as the anchor tag.
It is applied to develop hyperlinks.

A hyperlink connects the following:

  • From one webpage to another
  • A webpage to a file
  • A webpage to an email address

Example:
<a href="https://www.myStore.com">Visit the store. </a>

Important Attribute:

href – This is the address of the link.

Webpages are interactive because of hyperlinks.

Unordered List (UL)

The <ul> tag is used to make a list consisting of bullet points.
Example:

<ul>
<li>Apple</li>
<li>Banana</li>
</ul>

Attribute:

type – Alters the style of bullet

  • disc
  • circle
  • square

Lists are useful in organising information.

Ordered List (OL)

The <ol>tag is used to make a numbered list.

Example:

<ol>
<li>Step One</li>
<li>Step Two</li>
</ol>

Attributes:

Type – alters numbering style

  • 1 (numbers)
  • A (capital letters)
  • a (small letters)
  • I (Roman numbers)
  • i (small Roman numbers)

Start - starts numbering from a particular number.

Example:
<ol type="A" start="3">

Steps and instructions can be done by use of ordered lists.

List Item (LI)

  • The <li> tag describes every item on a list.
  • It is used inside <ul> or <ol>.
  • Each <li> represents one point.

Some More Advanced Tags

Image Tag <img>

Used to insert images.

Attribute:

  • src – Image location
  • alt - Alternative text

Example:
<img src="https://cyber.olympiadsuccess.com/assets/images/cyber_square/phone.jpg" alt="environment Image">

Paragraph Tag <p>

  • Paragraphs of text are made using it.
  • It assists in the proper organisation of content.

Line Break <br>

Used to push the text to the next line.

Horizontal Rule <hr>

Used to make a horizontal line to divide content.

Introduction to CSS

CSS is applied to enhance webpage design. It's known as Cascading Style Sheets.

With CSS, you can:

  • Change text colour
  • Change background colour
  • Adjust font size
  • Set alignment
  • Spacing

Example:

p {
color: blue;
font-size: 16px;
}

This CSS rule changes:

  • The text colour is blue
  • The font size is 16 pixels
  • CSS makes web pages look neat, colourful and organised.

How HTML and CSS Work Together

  • HTML gives a website's content and structure.
  • The CSS styles the content and makes it visually beautiful.

For example:

  • HTML creates a heading.
  • CSS changes its colour and size.

Together, they make a complete and attractive webpage.

QUIZ FOR HTML AND CSS

1. A student develops a webpage of text and images and realises that the page appears boring because of a lack of colours and styling. What technology is primarily applied to enhance the look of the webpage?

A) HTML
B) CSS
C) JavaScript
D) SQL

Answer: B) CSS

2. The following code is found on a webpage:

<a href=https://www.bookshop.com>Open Store <a/>

What will the user do after clicking the Open Store on the webpage?

A) A file will download
B) A new paragraph will appear
C) The specified site link will open in the browser.
D) The background of the pages will change.

Answer: C) The specified site link will open in the browser.

3. A student would like to show the following instructions on a webpage:

Step 1
Step 2
Step 3

What is the most appropriate HTML tag to use to create such a list?

A) <ul>
B) <ol>
C) <li>
D) <p>

Answer: B) <ol>

4. A webpage contains this code:

<ol type="A" start="3">

What will be the item label of the first list item?

A) A
B) B
C) C
D) D

Answer: C) C

5. A learner desires to list fruits with bullets instead of using numbers. Which HTML tag should be used?

A) <ul>
B) <ol>
C) <li>
D) <br>

Answer: A) <ul>

6. Consider the following code:

<img src="https://cyber.olympiadsuccess.com/assets/images/cyber_square/tree.jpg" alt="Green Tree">

In case the image file is not loading, what is most likely to be displayed on the webpage?

A) A blank space only
B) The text "Green Tree"
C) A horizontal line
D) The page will crash

Answer: B) The text "Green Tree"

7. A student desires that the reading on a webpage be transferred to the next line without a new paragraph beginning. Which HTML tag should be used?

A) <p>
B) <hr>
C) <br>
D) <ul>

Answer: C) <br>

8. The following CSS rule is added by a web designer:

p {
color: blue;
font-size: 16px;
}

How will this affect the web page?

B) Page colour background.
B) Colour and size of paragraph text.
C) Alignment of images
D) Number of paragraphs

Answer: B) Colour and size of paragraph text.

9. Provide headings, pictures, lists and hyperlinks that have been formatted adequately, but the layout and colours are yet to be established. In what language did these elements provide their framework?

A) CSS
B) HTML
C) XML
D) JSON

Answer: B) HTML

10. One student explains it as 'HTML builds the structure of a web page, and CSS beautifies it. What real-life example can be used to describe this relationship?

A) CSS is the switch, and the electricity is HTML.
B) HTML is the structure of the building, but CSS is the decoration and paint.
C) the keyboard is HTML, and the mouse is CSS.
D) HTML is the internet, and CSS is Wi-Fi.

Answer: B) HTML is the structure of the building, but CSS is the decoration and paint.