Scribd
Upload
122 views9 pages

Webdev Midterm Reviewer

The document provides information about HTML including tags like <html>, <head>, <body>, and other common elements. It also covers topics like lists, links, images, tables, forms, and using CSS for transitions. Key elements and their purposes are defined.

Uploaded by

Mendoza Paula Nicole Navarro
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
122 views9 pages

Webdev Midterm Reviewer

The document provides information about HTML including tags like <html>, <head>, <body>, and other common elements. It also covers topics like lists, links, images, tables, forms, and using CSS for transitions. Key elements and their purposes are defined.

Uploaded by

Mendoza Paula Nicole Navarro
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/ 9

WEBDEV MIDTERM REVIEWER

MODULE 2

HTML stands for Hyper Text Markup Language

HTML - a language for creating web pages

HTML - not a programming language. It is a markup language

Markup Language - a set of markup tags

Paired Tags - These tags come in pairs. That is they have both opening(< >) and closing(</ >) tags.

Singular Tags - These tags do not required to be closed.

HTML documents - must start with a <!DOCTYPE> declaration.

<html> tag - represents the root of an HTML document.

<html> tag - the container for all other HTML elements (except for the <!DOCTYPE> tag).

<title> tag - defines the title of the document. The title must be text-only, and it is shown in the
browser's title bar or in the page's tab.

<head> element – A container for metadata (data about data) and is placed between the <html>
tag and the <body> tag.

Metadata - data about the HTML document. Metadata is not displayed.

<body> tag - defines the document's

<body> element - contains all the contents of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.

Local Host Servers Text Editors Common coding errors

• XAMPP • Aptana Studio 3 • An opening tag


(Cross-Platform) without a closing
• LAMP
tag.
• Brackets 1.0(Cross-
• LEMP
Platform) • Misspelled tag or
• MAMP attribute names.
• Notepad++
• WAMP (Windows) • Quotation marks
that aren’t paired.
• AMPSS • TextMate (Mac)
• Incorrect file
• EasyPHP references in link,
img, or <a>
elements.
Module 3

Adding text to our HTML page is simple using an element opened with the tag <p> which creates a
new paragraph.

There are a few different types of lists you can use, depending on the content you want to display.

• Un-ordered Lists

• a simple HTML list that you can use when the order of the items you’re listing isn’t
important, and rearranging the order wouldn’t cause confusion or change the
hierarchy of the list.

<ul>

<li>Item A</li>

<li>Item B</li>

<li>Item C</li>

</ul>

• Ordered Lists

• Ordered lists are used when the order of the items is important, for example, a list
of instructions that must be followed in order.

<ol>

<li>Step 1</li>

<li>Step 2</li>

<li>Step 3</li>

</ol>

• Nested Lists

• a little more complex, because it’s essentially a “list within a list” with a variety of
different indentations and bullet point types used to denote points and sub-points.

<ul> <li>Point B</li>

<li>Point A</li> <ul>

<ul> <li>Sub-point B.1</li>

<li>Sub-point A.1</li> <li>Sub-point B.2</li>

<li>Sub-point A.2</li> </ul>

</ul>
HTML links - hyperlinks which allow the user to click and navigate to another page or document

<a href="https://tsu.edu.ph/">Click this link to visit Tarlac State University</a>

Images can be hyperlinked as well as text.

<a href="https://tsu.edu.ph/">

<img src=“myprofile.jpg" width="450" height="200">

</a>

<h2>Absolute URLs</h2>

<p><a href="https://tsu.edu.ph/">TSU</a></p>

<p><a href="https://student.tsu.edu.ph/">Student Portal</a></p>

<h2>Relative URLs</h2>

<p><a href="html_images.html">HTML Images</a></p>

<p><a href="/css/default.html">CSS Tutorial</a></p>

Use mailto - inside the href attribute to create a link that opens the user's email program

<a href="mailto:[email protected]">Send email</a>

The title attribute specifies extra information about an element.

<a href="https://tsu.edu.ph" title="Go to Tarlac State University">Visit our University


Website</a>

The <img> tag contains attributes only and does not have a closing tag <img src=“myprofile.jpg"
alt="Happy Student" width="450" height="200">
MODULE 4

table - an arrangement of data in rows and columns, or possibly in a more complex structure.

HTML table - defined with the “table” tag. Each table row is defined with the “tr” tag.

table header - defined with the “th” tag. By default, table headings are bold and centered.

table data/cell - defined with the “td” tag.

border - set using the CSS border property. If you do not specify a border for the table, it will be

displayed without borders.

For borders to collapse into one border, add the CSS border-collapse property.

Cell padding - specifies the space between the cell content and its borders.

By default the table headings are bold and centered.

Border spacing - specifies the space between the cells.

To make a cell span more than one column, we must use the colspan attribute.

To make a cell span more than one row, we must use the rowspan attribute:

Nesting tables - simply means making a Table inside another Table.

HTML Forms - are required, when you want to collect some data from the site visitor.

• A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc.

<form action = "Script URL" method = "GET|POST">

form elements like input, textarea etc.

</form>

HTML Form Controls

o Text Input Controls

o Single-line text input controls - This control is used for items that require only one
line of user input, such as search boxes or names.

o Password input controls - This is also a single-line text input but it masks the
character as soon as a user enters it.

o Multi-line text input controls - This is used when the user is required to give details
that may be longer than a single sentence.

o Checkboxes Controls - used when more than one option is required to be selected.

o Radio Box Controls - used when out of many options, just one option is required to be
selected.
o Select Box Controls - also called drop down box which provides option to list down various
options in the form of drop down list,

o File Select boxes - If you want to allow a user to upload a file to your web site, you will
need to use a file upload box, also known as a file select box.

o Button Controls - There are various ways in HTML to create clickable buttons. You can also
create a clickable button using <input>tag by setting its type attribute to button.

o Hidden Controls - used to hide data inside the page which later on can be pushed to the
server

Attribute Value Description

autoplay  autoplay Specifies that the video will play automatically.

controls  controls Specifies that the video controls gets displayed.


o C
li
height  pixels Specifies the height
c
k
loop  a loop Specifies that the video will start again every time after
b finish.
l
muted e muted Specifies that the audio should be muted
B
u
poster t URL Specifies the image to be shown while the video is
t downloading.
o
n
preload  auto Specifies what author thinks will lead to user experience
s metadata at its best.
- none

src  URL Specifies the URL

width  pixels Specifies the width

o Submit and Reset Button -

MODULE 5

HTML supports <audio> tag - used to embed sound content in an HTML or XHTML document as
follows.
Transitions are a lot of fun, so let’s give them a whirl. When applying a transition, there are a few
decisions to make, each of which is set with a CSS property:
• Which CSS property to change (transition-property)

• How long it should take (transition-duration)

• The manner in which the transition accelerates (transition-timingfunction)

• Whether there should be a pause before it starts (transition-delay)

Transition-property - identifies the CSS property that we want to transition smoothly. In our
example, it’s the background-color.

Transition-duration - sets the amount of time it will take for the animation to complete in seconds
(s) or milliseconds (ms).

Transition-timing-functionproperty - takes one of the following keyword values:

 ease - Starts slowly, accelerates quickly, then slows down at the end. This is the default
value and works just fine for most short transitions.
 linear - Speed stays consistent from the transition’s beginning to end.
 ease-in - Starts slowly, then speeds up.
 ease-out - Starts out fast, then slows down.
 ease-in-out - Starts slowly, speeds up, then slows down again at the very end. It is
similar to ease, but with less pronounced acceleration in the middle.

 cubic-bezier(#,#,#,#) - This is a function for defining a Bezier curve that describes the
transition acceleration. It’s super math-y and I can’t explain it all here.

 steps(#, start|end) - Divides the transitions into a number of steps as defined by a


stepping function.

 step-start - This changes states in one step, at the beginning of the duration time (the
same as steps(1,start)).

 step-end - This changes states in one step, at the end of the duration time (the same as
steps(1,end))

Transition-delay property - as you might guess, delays the start of the animation by a specified
amount of time.
Animation - lets an element gradually change from one style to another.

@keyframes rule - the animation will gradually change from the current style to the new style at

certain times

Markup Languages - are the essential tools required to create a webpage.

Extensible Markup Language (XML) - a markup language that defines a set of rules for encoding
documents in a format that is both human-readable and machine-readable.

MODULE 7

Responsive web design - provides an optimal experience.

The viewport - the user's visible area of a web page

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media query - a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and
expand as you resize the browser window.

If you want to restrict a responsive image to If the width property is set to 100%, the
a maximum size, use the max-width video player will be responsive and scale up
property, with a pixel value of your choice: and down:

.responsive { video {

width: 100%; width: 100%;

max-width: 400px; height: auto;

height: auto; }

You might also like