Transcript Web Authoring - WordPress.com

WEB
AUTHORING
HYOJEONG KIM
INDEX
1. Web page
Web page, Web page construction, text, fonts, color, images, tables,
hyperlinks, metadata
2. HTML
Nature of HTML and XHTML, features of HTML and XHTML, how to use
HTML and XHTML
3. CSS
Nature of cascading style sheets, features of CSS, how to use CSS
4. Terminology
Authoring, sites, uploading, file transfer protocol (FTP)
1. WEB PAGE
▪ W E B PAG E , W E B PAG E CO NS TRUCTI O N
▪ TE X T
▪ FO NTS
▪ CO LO R
▪ I MAG E
▪ TABLE S
▪ HYP E RLI NKS
▪ ME TADATA
WEB?
▪ Web page
According to Wikipedia, web page is a web document that is suitable for the web
browser. A web browser displays a web page on a monitor or mobile device.
The web page is what displays, but the term also refers to a computer file, usually
written in HTML or similar markup language, whose main distinction is to provide
hypertext that will navigate to other web pages via links.
▪ Web page construction
According to Wikipedia, Web page construction is an approach to the design and
planning of websites that involves technical, aesthetic and functional criteria. This
requires particular attention to web content, the business plan, usability, interaction
design, information architecture and web design.
WEB PAGE CONSTRUCTION
▪ Web page construction
It is a thing that is included by
default when I think. This picture is
I made by using Photoshop, I’ve
produced a default layout. This is a
layout very universal. However, I
will create a web site of little else.
WEB AUTHORING TOOLS
▪ Authoring tools
In computing, software for creating Web pages. The basic Web authoring tool is HTML, the
source code that determines how a Web page is constructed and how it looks. Other programs,
such as Java and VRML, can also be incorporated to enhance Web pages with animations
and interactive features. Commercial authoring tools include Adobe Dreamweaver, NetObjects'
Fusion, and Microsoft's Expression Web.
HTML-Kit : I can download and install HTML-Kit on my PC at no cost. I can also take
advantage of assorted plug-ins to enhance its capabilities.
Komodo Edit : Considered by some to be the best free XML editor available today, Komodo
Edit runs on Windows, Mac, and Linux and includes a lot of features for HTML and CSS
development and coding design.
KompoZer : KompoZer is another WYSIWYG Web page editor that combines Web
authoring with Web file management. Designed for ease of use, it's ideal for nontechnical
users who are new to HTML and coding. KompoZer runs on Windows, Mac, and Linux
WEB PAGE TEXT
▪ text
Many websites choose to display a
short explanatory text in a
prominent position of their web
page layouts to inform visitors what
the purpose of the site is. This
introductory text, when crafted well,
can help users quickly decide
whether they’re in the right place or
not.
WEB PAGE FONT
▪ Font
Font, is a medium to transmit
information. So, readability is very
important. Design only biased even
if you use a small font, information
transmission so doesn’t work, you
will not be able to Web design
excellent. When you design the
Web there are two fonts. It is Serif
font or San-serif font. Serif font is
Ming-style printing type and Sanserif font is Gothic type. San-serif
font is excellent readability and
familiar to us. But serif font is used
when you want to emphasize this.
WEB PAGE FONT
▪ TOP 10 FAVORITE FREE FONTS
▪ TOP 10 PREMIUM FONTS
Here is the list of Top 10 free fonts
mentioned by Web and graphic designers
in the survey. Fonts that come bundled with
operating systems, fonts like Arial, Verdana,
Times New Roman, Georgia, and Tahoma
have been excluded.
This is the list of most popular premium
(paid) fonts among designers. Some of
them are very expensive but the quality of
the font speaks for itself.
1. Myriad Pro
2. Gotham
2. League Gothic
3. DIN
3. Cabin
4. Futura
4. Corbel
5. Neo Sans
5. Museo Slab
6. Adobe Caslon
6. Bebas Neue
7. Skolar
7. Ubuntu
8. Kautiva
8. Lobster
9. Caecilia
9. Franchise
10. Fedra Sans
10. PT Serif
1.Helvetica
WEB PAGE COLOR
▪ color
It's me decorate the web site, there
are images and fonts. However,
color is also very important.
HTML colors are defined using a
hexadecimal notation (HEX) for the
combination of Red, Green, and
Blue color values (RGB). The
lowest value that can be given to
one of the light sources is 0 (in HEX:
00). The highest value is 255 (in
HEX: FF). HEX values are specified
as 3 pairs of two-digit numbers,
starting with a # sign. Some years ago, when computers supported max 256 different colors, a list o
mxf 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.
The 216 cross-browser color palette was created to ensure that all computers would display the
colors correctly when running a 256 color palette.
This is still important today, since most computers can’t display millions of different colors. we need
“Web Safe Colors”.
WEB PAGE IMAGE
▪ Image
There are three types of images that can be used
on web pages
JPG is common images format. Use JPG images
for photographs and other images that have
millions of colors. But, The JPG format is not
suited to images with text, large blocks of solid
color, and simple shapes with crisp edges. This is
because when the image is compressed the text,
color, or lines may blur resulting in an image that
is not as sharp as it would be saved in another
format.
The GIF format is not suitable for photographic
images or images with gradient colors. Because
the GIF format has a limited number of colors.
GIF format use for simple animation file.
The PNG format was developed as a replacement for the GIF format when it appeared that GIF
images would be subject to a royalty fee. PNG files offer alpha transparency as well as animation. PNG
images are also not well supported on older cell phones and feature phones. PNG format use for
transparent background. PNG only can show transparent.
WEB PAGE TABLE
▪ table
If you want to create a web site,
use only if you want to publish the
table. We want to make tables in
web site, and we can use ‘tables’.
Even though tables is easy to make
web site, while HTML5 allows
tables for layout, it is not a good
idea. It’s not suited for flexible web.
Tables set the frame and limit
content in frame.
WEB PAGE HYPERLINK
▪ Hyperlink
An element in an electronic
document that links to another place
in the same document or to an
entirely different document. Typically,
you click on the hyperlink to follow the
link. Hyperlinks are the most essential
ingredient of all hypertext systems,
including the World Wide Web.
If the link is bad or no longer exists it
is referred to as a broken link, these
links will result in a 404 error
message when visiting them.
Finally, it is also possible to create a
link to a different portion of the same
page, these hyperlinks are referred to
as an bookmark.
WEB PAGE METADATA
▪ metadata
Simply put, metadata is data about data. It
is descriptive information about a
particular data set, object, or resource,
including how it is formatted, and when
and by whom it was collected. Although
metadata most commonly refers to web
resources, it can be about either physical
or electronic resources. It may be created
automatically using software or entered by
hand.
The underlying concepts of metadata have
been in use for as long as collections of
information have been organized. For
example, the information structure for
materials in library card catalogs is a type
of metadata that has served as a
collection management and resource
discovery tool for decades.
Using metadata, it is possible to create
customizable tags for markup languages
such as XML and SGML.
PROVIDING SITE
 fonts
http://www.dafont.com/
http://www.myfonts.com/
http://www.google.com/fonts
http://www.1001freefonts.com/
 Color
http://dioceseofboac.org/tonz/?p=325
2. HTML
▪ NATURE O F HTML AND X HTML
▪ FE ATURE S O F HTML AND X HTML
▪ HO W TO US E HTML AND X HTML
SIMPLE HTML & XHTML
HTML and XHTML are markup languages. Markup languages are languages that
“mark up” plain text so it is formatted and displayed in a web browser in interesting
and useful ways. Web pages are rendered (displayed) by browsers when they
load a copy of your web documents. Users load web documents by entering the
web document’s URL into the browser.
NATURE OF HTML & XHTML
▪ HTML
Web pages are created using Hypertext Markup Language (HTML), which is an authoring
language used to create documents for the World Wide Web.
HyperText Markup Language is the main markup language for creating web pages and other
information that can be displayed in a web browser.
The purpose of a web browser is to read HTML documents and compose them into visible or
audible web pages.
▪ XHTML
XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that
mirror or extend versions of the widely used Hypertext Markup Language (HTML), the
language in which web pages are written.
otherwise known as the Extensible Hypertext Markup Language, is a markup language that is
very similar to HTML, except that it is based on XML rather than SGML, XML represents a
more restrictive subject of SGML, resulting in tighter syntax that yields more consistent results
when markup is rendered by browsers.
While HTML was defined as an application of Standard Generalized Markup Language, a very
flexible markup language framework, XHTML is an application of XML, a more restrictive
subset of SGML.
FEATURES OF HTML
▪ HTML
HTML elements form the building blocks of all websites. HTML allows images and objects to
be embedded and can be used to create interactive forms. It provides a means to create
structured documents by denoting structural semantics for text such as headings, paragraphs,
lists, links, quotes and other items. It can embed scripts written in languages such as
JavaScript which affect the behavior of HTML web pages. HTML uses a set of special
instructions called tags or markup to define the structure and layout of a Web document and
specify how the page is displayed in a browser.
HTML is platform independent, meaning you can create, or code, an HTML file on one type of
computer and then use a browser on another type of computer to view that file as a Web page.
The page looks the same regardless of what platform you are using. One of the greatest
benefits of web technology is that the same Web page can be viewed on many different types
of digital hardware, including mobile devices like smart phones.
FEATURES OF XHTML
▪ XHTML
XHTML documents has only one root element. All elements including variables must be in
lower case, and values assigned must be surrounded by quotation marks, closed and nested
for being recognized. This is a mandatory requirement in XHTML unlike HTML where it is
optional. The declaration of DOCTYPE would determine rules for documents to follow.
It does distinguish upper case and lower case. Also, every element and attribute must be
written in lower case.
All the kinds of tags are made up of starting tag and ending tag.
Tags are sequentially executed but if an error happened, you can see them on your browser
unlike HTML. Therefore, you will feel more comfortable than HTML which doesn’t show the
result of code with errors.
HOW TO USE HTML
The picture above , try a simple
coding sites W3Schools.com
HTML is written in the form of
HTML elements consisting of tags
enclosed in angle brackets (like
<html>), within the web page
content. HTML tags most
commonly come in pairs like <h1>
and </h1>, although some tags
represent empty elements and so
are unpaired, for example <img>.
The first tag in a pair is the start tag,
and the second tag is the end tag
(they are also called opening tags
and closing tags). In between these
tags web designers can add text,
further tags, comments and other
types of text-based content.
VARIOUS HTML TAG
HOW TO USE XHTML
And when you use XHTML, you must make sure putting the document type declaration the
very first thing in your HTML document, before the <html> tag as well. It explains to clients,
web browsers what version of XHTML the page is written in. In a XHTML document, the
character encoding has to be mentioned in XML declaration or meta http-equiv. If there isn’t
character encoding in the document, the XML interpreter programme thinks it as UTF-8 or
UTF-16 unless it wasn’t declared in the high protocol.
XHTML code looks very similar to plain old HTML code, with just a couple of syntactic
differences. Three examples of valid XHTML documents are shown below.
▪ Example 1 :
This example used the strict
DTD, meaning that every
single tag must be closed
properly, all attributes
assigned values, etc
HOW TO USE XHTML
▪ Example 2 :
This example uses the
transitional DTD, which
provides support for older
browsers that don’t recognize
style sheets.
▪ Example 3 :
This example uses the
frameset DTD, which allows
us to split one XHTML page
into multiple frames, with
each frame containing an
XHTML page within it
3. CSS
▪ NATURE O F CAS CADI NG S TYLE S HE E TS
▪ FE ATURE S O F CS S
▪ HO W TO US E CS S
NATURE OF CSS
▪ CSS
CSS is an acronym for Cascading Style Sheets.
CSS is a style language that defines layout of HTML documents. For example, CSS covers
fonts, colors, margins, lines, height, width, background images, advanced positions and many
other things.
CSS was first developed in 1997, as a way for Web developers to define the look and feel of
their Web pages. It was intended to allow developers to separate content from design so that
HTML could perform more of the function that it was originally based on - the markup of
content, without worry about the design and layout.
CSS didn't gain in popularity until around 2000, when Web browsers began using more than
the basic font and color aspects of CSS. And now, all modern browsers support all of CSS
Level 1, most of CSS Level 2, and some aspects of CSS Level 3.
Web Designers that don't use CSS for their design and development of Web sites are rapidly
becoming a thing of the past. And it is arguably as important to understand CSS as it is to
know HTML - and some would say it was more important to know CSS.
HTML can be used to add layout to websites. But CSS offers more options and is more
accurate and sophisticated. CSS is supported by all browsers today.
FEATURES OF CSS
▪ CSS
CSS was a revolution in the world of web design. The concrete benefits of CSS include:
•
control layout of many documents from one single style sheet;
•
more precise control of layout;
•
apply different layout to different media-types (screen, print, etc.);
•
numerous advanced and sophisticated techniques.
CSS is helping layout, background and text disposition make more detail setting than HTML.
And If I change <h1> tag design, all designs of<h1> tags would be changed. You don't need to
change each <h1> tags. CSS is very comfortable.
Because of divided CSS file, between web developer and designer cooperative work become
easily. CSS isn't able to do work in the old browser(explorer 6 or 7) version.
HOW TO USE CSS
Selector { property : value;}
Selector : What HTML tag(s) does the property
apply to (e.g. “body”)
property : The property could for example be the
background color (“background-color”)
Value : The value of the property background color
could be red for example (“#FF0000”)
Method 1: In-line (the attribute style)
HOW TO USE CSS
Method 2: Internal (the tag style)
Method 3: External (link to a style sheet)
4. TERMINOLOGY
▪ AUTHO RI NG
▪ S I TE S
▪ UP LO ADI NG
▪ FI LE TRANS FE R P RO TO CO L (FTP )
AUTHORING
▪ Authoring
Authoring may refer to :
Writing, as by an author
Authoring systems, computer based systems that allow the creation of content for
intelligent tutoring systems
Optical disc authoring and DVD authoring, and DVD authoring, the process of
creating a DVD or a CD from multimedia source materials.
▪ Web Authoring
It mean making Web site. Authoring system make software which create multimedia
applications for multimedia objects. In computing, the process of composing a courseware,
web page, or a multimedia application ( presentation) with text, sound, still and video pictures,
and animation. Authoring also includes creating navigating and other tools that allow
interaction between the user and the application
SITES
▪ Sites
Site is host computer system which supplies internet service like FTP, gopher and telnet.
It's short for web site. Web site is gathering of specific subjects which include starting files.
There are many company web sites even individual we page.
For example, Web pages that are connected to the address https://www.google.co.uk/ the
Google site.
▪ Example Site
http://www.youtube.com/
https://www.google.co.uk/
http://en.wikipedia.org/wiki/Main_Page
UPLOADING
▪ Uploading
Uploading is the transmission of a file from one computer system to another, usually larger
computer system. From a network user's point-of-view, to upload a file is to send it to another
computer that is set up to receive it.
Transmission in the other direction is downloading from one, usually larger computer to
another, usually smaller computer. From an Internet user's point-of-view, downloading is
receiving a file from another computer.
The File Transfer Protocol (FTP) is the Internet facility for downloading and uploading files.
When you send or receive an attached file with an e-mail note, this is just an attachment, not a
download or an upload. However, in practice, many people use "upload" to mean "send" and
"download" to mean receive. The term is used loosely in practice and if someone says to you
"Download (or upload) such-and-such a file to me" via e-mail, they simply mean "Send it to
me."
In short, from the ordinary workstation or small computer user's point-of-view, to upload is to
send a file and to download is to receive a file.
WHAT DOES IT MEAN TO
UPLOAD OR DOWNLOAD?
▪ Uploading
Both upload and download refer to the process
of transferring a file. When you transfer a file,
you create a copy in the location you choose.
Upload means to transfer a file or files from your
own computer to another computer. For instance,
you might transfer a file from your home PC to
the Yahoo computer that stores your Web
Hosting files.
Download means to transfer a file from another
computer to your own. You might download a file
from your Web Hosting account to your home PC.
FILE TRANSFER PROTOCOL
▪ file transfer protocol (FTP)
FTP is an acronym for File Transfer Protocol. As the name suggests, FTP is used to transfer
files between computers on a network. You can use FTP to exchange files between computer
accounts, transfer files between an account and a desktop computer, or access online
software archives. Keep in mind, however, that many FTP sites are heavily used and require
several attempts before connecting.
As a user, you can use FTP with a simple command line interface (for example, from the
Windows MS-DOS Prompt window) or with a commercial program that offers a graphical user
interface. Your Web browser can also make FTP requests to download programs you select
from a Web page. Using FTP, you can also update (delete, rename, move, and copy) files at a
server. You need to logon to an FTP server. However, publicly available files are easily
accessed using anonymous FTP.
Basic FTP support is usually provided as part of a suite of programs that come with TCP/IP.
However, any FTP client program with a graphical user interface usually must be downloaded
from the company that makes it.
REFERENCE
http://dic.naver.com/
http://en.wikipedia.org/wiki/
http://www.discmakers.com/authoring/
http://www.javascriptkit.com/howto/xhtml_intro4.shtml