WEB AU-THORINGHYOJEONG KIM

INDEX1. Web page Web page, Web page construction, text, fonts, color, images, tables, hy-

perlinks, 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▪ WEB PAGE, WEB PAGE CONSTRUCTION

▪ TEXT

▪ FONTS

▪ COLOR

▪ IMAGE

▪ TABLES

▪ HYPERLINKS

▪ METADATA

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 It is a thing that is included by de-fault 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 PAGE CONSTRUCTION

WEB AUTHORING TOOLS ▪ Authoring toolsIn 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 pro-grams, such as Java and VRML, can also be incorporated to enhance Web pages with anima-tions and interactive features. Commercial authoring tools include Adobe Dreamweaver, Ne-tObjects' 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 advan-tage of assorted plug-ins to enhance its capabilities.

Komodo Edit : Considered by some to be the best free XML editor available today, Ko-modo 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 author-ing 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

▪ text Many websites choose to display a short explanatory text in a promi-nent position of their web page lay-outs to inform visitors what the pur-pose 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 TEXT

▪ Font Font, is a medium to transmit in-formation. 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 ex-cellent. 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 San-serif 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

WEB PAGE FONT▪ TOP 10 FAVORITE FREE FONTS

Here is the list of Top 10 free fonts men-tioned by Web and graphic designers in the survey. Fonts that come bundled with operating systems, fonts like Arial, Ver-dana, Times New Roman, Georgia, and Tahoma have been excluded.1. Myriad Pro2. League Gothic3. Cabin4. Corbel5. Museo Slab6. Bebas Neue7. Ubuntu8. Lobster9. Franchise10. PT Serif

▪ TOP 10 PREMIUM FONTS

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.Helvetica

2. Gotham

3. DIN

4. Futura

5. Neo Sans

6. Adobe Caslon

7. Skolar

8. Kautiva

9. Caecilia

10. Fedra Sans

▪ color It's me decorate the web site, there are images and fonts. How-ever, 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 low-est 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 speci-fied as 3 pairs of two-digit numbers,

WEB PAGE COLOR

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”.

▪ Image There are three types of images that can be used on web pages

JPG is common images format. Use JPG im-ages 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.

WEB PAGE IMAGE

The PNG format was developed as a replacement for the GIF format when it appeared that GIF im-ages 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.

▪ 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 ta-bles for layout, it is not a good idea. It’s not suited for flexible web. Ta-bles set the frame and limit content in frame.

WEB PAGE TABLE

▪ Hyperlink An element in an electronic docu-ment 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 essen-tial ingredient of all hypertext sys-tems, 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 re-ferred to as an bookmark.

WEB PAGE HYPERLINK

▪ metadataSimply 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 com-monly refers to web resources, it can be about either physical or electronic resources. It may be created automatically using soft-ware or entered by hand.

The underlying concepts of metadata have been in use for as long as collections of in-formation have been organized. For exam-ple, 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 cus-tomizable tags for markup languages such as XML and SGML.

WEB PAGE METADATA

PROVIDING SITE fontshttp://www.dafont.com/

http://www.myfonts.com/

http://www.google.com/fonts

http://www.1001freefonts.com/

Colorhttp://dioceseofboac.org/tonz/?p=325

2. HTML▪ NATURE OF HTML AND XHTML

▪ FEATURES OF HTML AND XHTML

▪ HOW TO USE HTML AND XHTML

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 informa-tion 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 restric-tive 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 ▪ HTMLHTML 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 instruc-tions 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 great-est 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 op-tional. 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 writ-ten 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.

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 con-tent. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements and so are un-paired, 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 clos-ing tags). In between these tags web designers can add text, further tags, comments and other types of text-based content.

HOW TO USE HTML

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 char-acter encoding has to be mentioned in XML declaration or meta http-equiv. If there isn’t char-acter 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 differ-ences. 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 as-signed values, etc

HOW TO USE XHTML

▪ 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

▪ Example 2 :This example uses the transi-tional DTD, which provides support for older browsers that don’t recognize style sheets.

3. CSS▪ NATURE OF CASCADING STYLE SHEETS

▪ FEATURES OF CSS

▪ HOW TO USE CSS

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 con-tent, 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 accu-rate and sophisticated. CSS is supported by all browsers today.

FEATURES OF CSS ▪ CSSCSS 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 CSSSelector { 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 3: External (link to a style sheet)

Method 2: Internal (the tag style)

4. TERMINOLOGY▪ AUTHORING

▪ SITES

▪ UPLOADING

▪ FILE TRANSFER PROTOCOL (FTP)

AUTHORING ▪ AuthoringAuthoring 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 applica-tions 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 ▪ SitesSite 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 Sitehttp://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 an-other, usually smaller computer. From an Internet user's point-of-view, downloading is receiv-ing 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 in-stance, 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 soft-ware archives. Keep in mind, however, that many FTP sites are heavily used and require sev-eral attempts before connecting.

As a user, you can use FTP with a simple command line interface (for example, from the Win-dows MS-DOS Prompt window) or with a commercial program that offers a graphical user in-terface. 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 ac-cessed 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.

REFERENCEhttp://dic.naver.com/

http://en.wikipedia.org/wiki/

http://www.discmakers.com/authoring/

http://www.javascriptkit.com/howto/xhtml_intro4.shtml