Scribd
Upload
11 views8 pages

Computer Reviewer

Uploaded by

jadeddreemurr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views8 pages

Computer Reviewer

Uploaded by

jadeddreemurr
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

COMPUTER REVIEWER

HTML5 is a markup language used for structuring and presenting content on the
World Wide Web. It is the fifth and final major HTML version that is a World Wide
Web Consortium (W3C) recommendation. The current specification is known
as the HTML Living Standard.

<header>
specifies a header for a document or section. The <header> element should be used
as a container for introductory content or a set of navigational links. You can have
several <header> elements in one document.

<nav>
defines a section of navigation links. Not all links of a document must be in a <nav>
element. The <nav> element is intended only for major block of navigation links.

<article>
This element defines an article, which is a container for other elements.

<section>
defines sections in a document. Such as chapters, headers, footers, or any other
sections of the document.

< aside >


The aside element represents a section of a page that consists of a content that is
tangentially related to the content and which could be considered separate from that
content. <aside> content examples include pull-quotes, glossary or related links to
the content.

<footer>
defines a footer for a document or section. A <footer> element should
contain information about its containing element. It typically contains the author of
the document, copyright information, links to terms of use, contact information, etc.
You can have several <footer> elements in one document.

<figure>
specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc. While the content of the <figure> element is related to the main flow, its
position is independent of the main flow, and if removed it should not affect the flow
of the document.
<figcaption>
defines a caption for a <figure> element. The <figcaption> element can be placed
as the first or last child of the <figure> element.

<mark>
defines marked text. Use the <mark> tag if you want to highlight parts of your text.

<meter>
defines a scalar measurement within a known range, or a fractional value. This is
also known as a gauge. Examples of <meter> tag usage are: Disk usage, the
relevance of a query result, etc.

Note: The <meter> tag should NOT be used to indicate progress (as in a progress
bar).

<progress>
represents the progress of a task.

<details >
-specifies additional details that the user can view or hide on demand. The <details>
tag can be used to create an interactive widget that the user can open and close.

Any sort of content can be put inside the <details> tag. The content of a <details>
element should not be visible unless the open attribute is set.

<summary>
defines a visible heading for the <details> element. The heading can be clicked to
view/hide the
details.

CHAPTER 2
CSS
•CSS stands for Cascading Style Sheets
•CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
•CSS saves a lot of work. It can control the layout of multiple web pages all at once
•External stylesheets are stored in CSS files
EXTERNAL STYLE SHEET
With an external style sheet, you can change the look of an entire website by
changing one file.
Each page of your site must link to the style sheet using the <link> tag. The <link>
tag should bevinside the head section or your HTML file. The linked file contains
your CSS code.
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>

INTERNAL STYLE SHEET


Ideal for single web page only. Internal style sheets are defined in the head section
of an HTML page with the <style> </style> tag.
<head>
<style>
a { color: red;
text-align: center; }
h1 { color:blue; }
</style>
</head>

INLINE STYLE SHEET


Using an inline style sheet is NOT RECOMMENDED as the advantage of style sheets
is lost. Here, the
style functions as an attribute of the "style" attribute.
<p style="color: red; margin-left:5px;">Sample inline style sheet.
</p>

CASCADING STYLE SHEETS


The reason a style sheet is called cascading is because multiple style sheets
affecting the same selector will have to "cascade" or affect that item in a specific
sequence:
External - Style Sheets are applied first;
Internal - Style Sheet and finally;
Inline Style - Sheets are applied to the item

The HTML Class attribute is used to specify a class or group of tags. The class
attribute uses <div> to call a class. The HTML elements can share the same class.
The class name can be used in CSS and JavaScript elements. The class name is
case-sensitive.

The CSS Syntax: To create a class; write a period (.) character, followed by a
class name. Then, define the CSS properties within curly braces {}

The universal selector points to all the elements on an HTML document. It is


declared using an asterisk (*). In this example, all the declarations inside the curly
braces will apply to all the elements of the HTML page.

The element type selector points to one or more HTML elements of the same
name. In the example given above, the targeted HTML element is the paragraph (p)
element. Therefore, the text within the <p> tags in the HTML document will be red
in color and center-aligned.

CHAPTER 3
HTML elements can belong to more than one class.

The most important attribute of the <a> element is the href attribute, which
indicates the link's destination. The link text is the part that will be visible to the
reader. Clicking on the link text, will send the reader to the specified URL address.
One of the most powerful features of a web page is the ability to link to other
pages.

Webpages refer to the different pages found on a website. Every website has a
home page. To link webpages and websites, the HTML tag <a> and its attribute
href are both used in the HTML codes.

The HTML id attribute assigns a unique identifier for an HTML element within the
document. It can be used for styling purposes or by a JavaScript code. The id
attribute specifies a unique id for an HTML element. The value of the id attribute
must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is


also used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#) followed by an id name. Then,
define the CSS properties within curly braces {}.

Note: The id name is case sensitive!


Note: The id name must contain at least one character, and must not contain
whitespaces (spaces, tabs, etc.).
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only
be used by one HTML element within the page

The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.

The float property can have one of the following values:


left - The element floats to the left of its container
right The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the
text). This is the default.
inherit - The element inherits the float value of its parent In its simplest use, the
float property can be used to wrap text around images.

The target attribute specifies where to open the linked document. The target
attribute can have one of the following values:
_self - Default Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
-parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window

Both examples above are using an absolute URL (a full web address) in the href
attribute. A local link (a link to a page within the same website) is specified with a
relative URL (without the "https://www" part)

Pictures can also be used as a hyperlink to another website or webpage. The same
tag for inserting hyperlinks to text is used to insert hyperlinks to pictures, <a>. This
anchors or attaches the link to the element.

HTML bookmarks are used to allow readers to jump to specific parts of a


webpage.
Bookmarks can be useful if your page is very long.
To use a bookmark, you must first create it, and then add a link to it. Then, when
the link is clicked, the page will scroll to the location with the bookmark.
Anchors are created by placing the id attribute inside the opening tag of any HTML
element. For example, we could make the heading at the top of this page into an
anchor like this:

CHAPTER 4
HTML Forms are input elements that pass data to a server. There are many types
of input elements of this activity, text field, password field, and submit button will be
discussed.

HTML INPUT ELEMENT: Text Field


A text field is a one-line input field used to get information from a user.

Types:
Text
Radio
Checkbox
Submit
Button

Password Field - a password field is a one-line input field used to get a password
from a user.

Submit Button - is an input element used to send form data to a server.

Action Attribute
Defines the action to be performed when the form is submitted. Usually, the form
data is sent to a file on the server when the user clicks in the submit button.
CODE EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sample Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
/* Internal CSS */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 50px auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 5px 0 20px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Sample Form</h2>
<form action="submit_form.php" method="post">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" placeholder="Enter your
username"><br><br>

<label for="password">Password:</label><br>
<input type="password" id="password" name="password" placeholder="Enter your
password"><br><br>

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

<label for="interests">Interests:</label><br>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br><br>

<input type="submit" value="Submit">


</form>
</div>
</body>
</html>

You might also like