01 Asynchronous HTML 1
Uploaded by
fionnahilah01 Asynchronous HTML 1
Uploaded by
fionnahilahASYNCHRONOUS
CLASS
WEB PROGRAMMING
HTML
Lab Activity
Asynchronous Objectives
The students be able to learn the following:
- Text editors and Web application ( Notepad, Notepad ++,
Webmasterlite, and CX File Explorer)
- Environment of the application
- HTML basic tags and formatting
- Activity that will produced output as Laboratory 1.
Coverage of the Lab Activity
◦ Heading ◦ Font Element
◦ Paragraph Color Attribute, Font Style, Font Size
◦ Line Break ◦ Text Alignment
◦ Background ◦ Special Characters and Symbols
◦ Horizontal Rule ◦ Blockquote
◦ Character Formatting ◦ Comment
Physical Tags ◦ Hyperlinks
Bold, Italic, Underline ◦ Tables
◦ Preformatted Tag ◦ Frame
Text Editors
A text editor is a computer program that lets a user enter, change, store,
and usually print text (characters and numbers, each encoded by the
computer and its input and output devices, arranged to have meaning to
users or to other programs).
Typically, a text editor provides an "empty" display screen (or "scrollable
page") with a fixed-line length and visible line numbers. You can then fill the
lines in with text, line by line
Notepad
◦ Notepad is a generic text editor included
with all versions of Microsoft Windows that
allows you to create, open, and read
plaintext files.
◦ You can also use Notepad to create HTML
files. Make sure that Word Wrap is turned on
and type your HTML code the way you would
type plain text. When it comes time to save
your work, choose Save As, and select All
Files from the list of choices. Then save your
file with the .htm or .html extension.
HTML in Notepad
HTML in Notepad
Notepad ++
◦Notepad++ is a free (as in
“free speech” and also as in
“free beer”) source code
editor and Notepad
replacement that supports
several languages. Running
in the MS Windows
environment, its use is
governed by GNU General
Public License.
HTML in Notepad++
HTML in Notepad++
WebMasterLite
◦ WebMaster Lite - fast and lightweight (~1Mb only) HTML editor for web
developers. The editor is ideal for web authoring and programming on
the go. Have a handy source code editor in your pocket!
◦ Hot-keys for external keyboard: Ctrl+C (copy), Ctrl+V (paste), Ctrl+Z
(undo), Ctrl+Y (redo), Ctrl+R (open Recent Files), Ctrl+F (search),
Ctrl+G (goto line).
◦ WebMaster's HTML Editor is a set of webmaster tools: html editor, php
editor, css editor, javascript editor and plain text editor in a one
application with multiple text encodings. WebMaster's HTML Editor is a
set of webmaster tools: html editor, php editor, css editor, javascript
editor and plain text editor in a one application with multiple text
encodings. Developer can use it as lightweight web ide for
programming html5 and/or JavaScript. Also, the application is useful as
a simple notepad for your texts or notes.
HTML in WebMasterLite
HTML in WebMasterLite
HTML in WebMasterLite
HTML in WebMasterLite
HTML in WebMasterLite
Cx File Explorer
Cx File Explorer is a top-notch
app for managing all the files
and apps on your Android in
a fast and easy way. With this
app, you can see all the text
documents on your
smartphone at a glance. You
can also browse directories,
copy and paste files, and
more.
OUTPUT:
HEADING
OUTPUT:
PARAGRAPH
LINE BREAK
OUTPUT:
Horizontal
Rule
OUTPUT:
COLOR BACKGROUND
OUTPUT:
https://www.w3schools.com/colors/
colors_picker.asp
IMAGE BACKGROUND
OUTPUT:
IMAGE BACKGROUND
OUTPUT:
CHARACTER FORMATTING
OUTPUT:
PREFORMATTED TEXT
OUTPUT:
FONT ELEMENT
(Font Color, Style, and Size)
OUTPUT:
SPECIAL CHARACTERS
OUTPUT:
https://www.w3schools.com/html/html_symbols.asp
BLOCKQUOTE AND COMMENT
OUTPUT:
OUTPUT:
Hyperlink
OUTPUT:
Hyperlink (Absolute and Relative)
OUTPUT:
Hyperlink (Target)
OUTPUT:
Hyperlink
OUTPUT:
Hyperlink(send to EMAIL)
OUTPUT:
Hyperlink (Button)
OUTPUT:
Hyperlink (Title)
OUTPUT:
OUTPUT:
Table
Table
OUTPUT:
LAB ACTIVITY
(Asynchronous Activity)
◦ Create a web page consisting of the following:
◦ Your Name
◦ Student Number
◦ Section
◦ Hobbies
◦ Unforgettable Moments (Paragraph)
◦ Life Lessons (Paragraph)
◦ Aspiration in Life (Paragraph)
◦ What are your Future Goals? (Paragraph)
◦ Create your own design using the HTML tags and formatting
Rubric
◦Content - 20%
◦Layout - 20%
◦Graphics - 20%
◦Fonts - 10%
◦HTML Tags used - 30%
Total 100%
