Web Systems & Technologies | Midterm Reviewer

HTML

• stands for HyperText Markup Language

• It is the standard language used for creating web pages.

• It is composed of many elements that describe how the website should appear in the browser

• It marks up the content of a site

• Its documents are all plain text

Structure

It is added to elements with tags

Tags

It must be nested properly

Attributes

Can add function or meaning to elements.

Paragraph

• A unit of text presenting a single main idea or related group of ideas.

• It helps organize and structure written content

• Tag: <p>

Headlines/Header

• Short phrases or sentences that introduce or summarize content sections, guiding readers' attention.

• They're typically larger or bolder than regular text.

• Tags: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Formatting Styles

Used to emphasize or highlight text.

Italics

• Slant text for emphasis or to denote titles

• Tags: <i>, <em>

<i>

For visual-only italics

<em>

Used to emphasize something

Bold

• Makes the text darker or thicker, drawing attention to important information.

• Tags: <b>, <strong>

<b>

Used for visual-only bolds

<strong>

Used for importance, seriousness, urgency

Lists

Are used to organize and display information in a structured format

1. Unordered List

2. Ordered List

3. Definition List

Three (3) Types of Lists:

Unordered Lists

• Are used when the order of items is not significant.

• Each item in this list is preceded by a bullet point or another unordered marker.

• To create this list, you use the <ul> tag; and

• Each list item is defined using the <li> tag.

• Example:

  • Item

  • Item

  • Item

Ordered List

• Are used when the sequence or order of items matter.

• Each item in this list is preceded by a number or another ordered marker.

• To create this list, you use the <ol> tag; and

• Each list item is defined using the <li> (list item) tag.

• Example:

  1. Item

  2. Item

  3. Item

Definition List

• Are used to display terms and their corresponding definitions.

• Each term in this list is defined using the <dt> (definition term) tag; and

• Its corresponding definition is defined using the <dd> (definition description) tag.

Quotes

Can be represented using the <blockquote> and <q> tags

Blockquote

• Is used to indicate that a block of text is a longer quotation from another source.

• It typically renders with an indentation.

• Block context

Inline Quote

• <q> tags

• Is used for short inline quotations within a paragraph.

• Browsers typically render content inside <q> tags with quotation marks.

• Inline phrases

Code

• <code> tag

• Is used to define a piece of computer code.

• It's typically used to display code snippets within a paragraph or block of text without interpreting the code as HTML

• To prevent creating a tag and showing only that it is a code sample or a simple text, you can use < and > to get < and > sign.

<br>

• Is used to create a line break within a paragraph.

• After the <br> tag, the next line starts on a new line.

<pre>

• is used to enclose a block of preformatted text.

• Preformatted text within the <pre> tags preserves spaces, line breaks, and formatting displaying exactly as it’s written in the HTML code.

Subscripts

• Appears smaller and lower than the surrounding text

• Tag: <sub>

Superscript

• Appears smaller and higher than the surrounding text

• Tag: <sup>

Small

• Used to convey that has very little prominence

• Tag: <small>

Date and Time

• Used to represent a specific time or date.

• It's especially useful for indicating dates and times within content, such as publication dates, event times, or durations.

• Tag: <time>

datetime

• An attribute that is used to translate the time into a machine-readable format so that browsers can offer to add date reminders through the user's calendar, and search engines can produce smarter search results.

• Tag: <time datetime="2025-04-02">

Attributes

• Provide additional information about elements.

• Syntax: Placed within the element’s opening tag

1. Global Attribute

2. Element-specific

Two (2) Types of Attribute:

Global Attribute

• Attributes that can be applied to any HTML element.

• It provides functionalities such as CSS styling, element identification, and custom data storage.

• class

• id

• contenteditable = true

• lang

• dir

Some of the most useful global attributes:

Element-specific

• Attributes that are specific to certain HTML elements and cannot be used with all elements.

• Example:

  • src

  • href

  • alt

Hyperlink

• Allows users to navigate between web pages.

• They connect different parts of a website

<a>

• The anchor tag

• Used to create hyperlink

• Syntax:

<a href = "url">Link Text</a>

1. Absolute URLs

2. Relative URLs

Two (2) Types of URLs:

Absolute URLs

• Full web addresses

• Example:

  <a href="https://www.youtube.com/">Link Text</a>

Relative URLs

• Links within the same website

• Example:

  <a href="about.html">About Us</a>

Target Attribute

• Specifies where the linked page opens.

• Common values:

  • _self : opens in the same window/tab

  • _blank ": opens in a new window/tab

mailto:

• For Email Links

• Example:

  <a href="mailto:[e-mail]" target="_self">Email Me</a>

Image

• To put an image on a webpage, we use the image element.

• Are not technically inserted into a webpage; images are linked to web pages.

• Tag: <img>

• src

• alt

• width

• height

Some attributes used in Image <img>:

src

• Specifies the path of the image (for image)

• Specifies the url of the audio/video file (for audio & video)

• Assigned a valid url pointing to the relevant webvtt subtitle file in each case (for subtitles)

alt

Specifies an alternate text for the image

width

• Defines the width of the image/video in pixels.

• Describe the intrinsic aspect ratio of the image.

height

• Defines the height of the image/video in pixels.

• Describe the intrinsic aspect ratio of the image.

1. GIF

2. SVG

3. JPG or JPEG

4. PNG

Four (4) Main Image Formats:

GIF

• Stands for Graphic Interchange Format

• Does well compressing large areas of single-color

• Limited color space of 256 colors.

• Can do transparency, with jagged edges.

• Can have multiple frames and make a little movie.

• File Extension: .gif

SVG

• Stands for Scalable Vector Graphics

• Logos, icons, illustrations and etc.

• Vector File

• File Extension: .svg

JPG

• Stands for Joint Photographic Export Group

• You can pick a balance between quality and file size.

• File Extension: .jpg or .jpeg

PNG

• Stands for Portable Network Graphics

• Images that need transparency

• File Extension: .png

srcset

The descriptors in the ______ attribute specify the available widths of different image versions in pixels, aiding in responsive image loading based on device capabilities.

Viewport Width

User’s visible area of the screen

Physical Width of the Screen

Refers to the actual width of the device’s screen

sizes

An attribute that list which image to use at which media query

<picture>

• Important for flexibility in specifying image resources

• Contains two tags:

  1. one or more <source> tags

  2. one <img> tag; required as the last child

• Indicates files or browsers to choose from

Figures and Figcaption

For the search engines and AI to know that two pieces of content are related to each other we will be using figures.

<figure>

For anything that appears as a figure like images and tables, illustrating something.

<figcaption>

For demonstration of a concept that needs a caption

<audio>

• Used to place audio

• Syntax:

<audio></audio>

• src

• controls

• autoplay

• muted

• loop

Attributes of <audio>:

controls

Specifies that audio/video controls should be displayed, such as a play/pause button, etc.

autoplay

Specifies that the audio/video will start playing as soon as it is ready

muted

Specifies that the audio/video output should be muted

loop

Specifies that the audio/video will start over again, every time it is finished

poster

Specifies an image to be shown while the video is downloading, or until the user hits the play button.

<video>

Tag used to play video files

• src

• controls

• autoplay

• muted

• loop

• poster

• width/height

Attributes of <video>:

Captions

• Assume the viewer can’t hear anything; and

• Include non-speech elements, like speaker identifications and sound effects

• Are considered an accessibility aide

Subtitles

• Assume that the viewer can hear everything but can’t understand language, and translate spoken dialogue.

• Are more associated with foreign language translation.

<track>

• Used to create subtitles for an audio or video

• This tag is used to specify subtitles, caption files or other files containing text, that should be visible when the media is playing.

• Tracks are formatted in WebVTT format (.vtt files) or in Subtitles format (.sub files)

• kind

• label

• src

• srclang

• default

<track> attributes:

kind

Indicates the type of content the files contain

label

Indicates which language that subtitle is set for

srclang

Indicates what language each subtitle files contents are in

default

Indicates the default subtitle file definition to use

After the timecode

Where to put layout attributes?

line:0%

Positions the text at the top of the screen

vertical:lr

Makes the text display vertically from left to right.

alignment: start, center, end

Used to control the horizontal alignment of the text

align:start

Aligns the text to the start of the line, which is the left side in left-to-right (LTR) languages.

align:end

Aligns the text to the end of the line, which is the right side in left-to-right (LTR) languages.

ARIA Roles

• Stands for Accessible Rich Internet Applications

• Attributes used in HTML to enhance the accessibility of web content, especially for users who rely on assistive technologies like screen readers.

• Provide additional information about the purpose and behavior of elements on a webpage.

aria-label

• Used in HTML to provide an accessible name for an element.

• This label is read by assistive technologies, such as screen readers, to help users understand the purpose or function of the element.

• Example Syntax:

<button aria-label="Close">X</button>
<button aria-label="Logout">1</button>
<button aria-label="Login">2</button>
<button aria-label="Next">3</button>

aria-level

• Defines the hierarchical level of an element within a structure.

• Example Syntax:

  <h1 aria-level="1">Main Heading</h1>
  <h2 aria-level="2">Subheading</h2>

aria-pressed

• Indicates the current state of a toggle button

• Either true or false

• Example Syntax:

  <button aria-pressed="true">Button1</button>

aria-hidden

• Indicates whether the element is visible or hidden

• Either true or false

aria-checked

• Indicates the current state of a checkbox or radio button

• Either true or false

• Example Syntax:

  <input type="checkbox" aria-checked="true"/>

aria-valuemin

• Defines the minimum value of an element

• Example Syntax:

  <input type="checkbox" aria-valuemin="0"/>

aria-valuemax

• Defines the maximum value of an element

• Example Syntax:

  <input type="checkbox" aria-valuemax="0"/>

aria-valuenow

• Defines the current value of an element

• Screen reader will just read the define value even if you choose from the slider

• Example Syntax:

  <input type="range" aria-valuenow="50"/>

aria-required

• Indicates that user input is required on the element

• Either true or false

• Example Syntax:

  <input type="text" aria-required="true" placeholder="Name" />

aria-readonly

• Indicates that the element is read-only

• Either true or false

• Example Syntax:

  <p aria-readonly="true">Welcome Everyone!</p>

aria-disabled

• Indicates that the element is disabled and not interactive

• Either true or false

• Example Syntax:

  <button aria-disabled="true">Next</button>

div

• Block-level element

• Defines a section or a division in an HTML document

• It is used as a container for HTML elements to give style using CSS and modify using JavaScript.

• One of the fundamental building blocks in HTML used to group

  and style content.

• Can be used anytime

• Generic elements that have no semantic meaning on their own.

• They only become meaningful using CSS and JavaScript.

span

• Inline element

• Does not inherently force new lines or consume any more space than necessary beyond what its contained content requires.

• Used to group a small chunk of HTML elements or text for styling purposes, without disrupting the surrounding content's layout

• One of the fundamental building blocks in HTML used to group

  and style content.

• Can be used anytime

• Generic elements that have no semantic meaning on their own.

• They only become meaningful using CSS and JavaScript.

• class

• id

• lang

• aria roles

• Styles — for inline CSS

Global Attributes of div and span:

<form>

• Used to create a form for user input.

• It has an opening and closing tag.

• Are essential for collecting data from users, such as:

  • Login credentials,

  • Search queries; or

  • Feedback.

• It is a container for different types of input elements, such as:

  • Text fields,

  • Checkboxes,

  • Radio buttons,

  • Submit buttons, etc.

• Syntax:

<body>
	<form action="" method="">
		<!--
			form elements
		-->
	</form>
</body>

• action

• method

Attributes of <form>: