WEB AUTHORING HYOJEONG KIM. INDEX 1. Web page Web page, Web page construction, text, fonts, color,...

36
WEB AUTHORING HYOJEONG KIM

Transcript of WEB AUTHORING HYOJEONG KIM. INDEX 1. Web page Web page, Web page construction, text, fonts, color,...

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

web page is Web documents on the Internet. Some documents, images and text , sound , variety of video files are located.

▪ Web page construction

Web page construction is an approach to the design and planning of websites. The planning and design of the web site, you must configure the technical, aes-thetic, functionally.

The usability of when determining the structure of the web site, interaction design, information architecture is very important.

▪ 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 tools

Is a computer software for making a Web page. I make up a Web page where the HTML basi-cally. There is also other programs, such as VRML and Java. These programs may provide in-teractivity and animation. The authoring tool on the market, there is Expression Web and Mi-crosoft's Adobe Dreamweaver

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

In most websites, will be referred to a brief description on webpage to inform the visitors the purpose of the site. The reason for the promi-nent position is in order to be rec-ognized immediately. Appropriate text will help you understand the web site.

WEB PAGE TEXT

▪ Font

Font, is a medium to transmit in-formation. So, readability is very important. If you use a very small font, information transmission is dif-ficult.

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 excel-lent 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

This is a list of free fonts of ten graphic de-signer chose.

1. Myriad Pro

2. League Gothic

3. Cabin

4. Corbel

5. Museo Slab

6. Bebas Neue

7. Ubuntu

8. Lobster

9. Franchise

10. PT Serif

▪ TOP 10 PREMIUM FONTS

The font the most popular. However, it is Hope the money. It is very expensive some of this, but the quality is good.

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 color becomes the color val-ues of red, green, and blue. This is referred to as RGB. The minimum value is 0, the maximum value is 255. # It is designated as a pair of three 2-digit number beginning with symbols. A few years ago, the computer, to support a list of differ-ent colors up to 256 .

WEB PAGE COLOR

To notation suitable color computer, 256-color palette is made.Most computers will not be able to display millions of colors. So, color palette, is very important. We are, it is necessary to "Web Safe Colors".

▪ Image

The image on website is very important. There are three types of images that can be used on web pages.

JPG is a common image formats. The JPG im-age, there are millions of colors. However, JPG format is not suitable for text. In addition, it is not suitable for processing the edge of the image.

GIF format is not suitable for gradient color. This is because the GIF format, the number of avail-able colors is to limited. The GIF format, I use only a simple animation file.

PNG format was developed as an alternative to the GIF format. PNG file to provide animation and alpha transparency. PNG format is very conve-nient, but it is not supported by the old feature phones and mobile phone.

WEB PAGE IMAGE

▪ table

To create a table in the website and to use a table tag. Table, is due to the layout of HTML5. However, the table tag is not suitable for a flexible Web. Table tag sets and limitations frame in the frame. table tag can also be used when taking a layout.

WEB PAGE TABLE

▪ Hyperlink

I say the connection between the ele-ments and words or phrases, symbols, and images of the hypertext document, and other elements of the hypertext doc-ument or other elements, the rest of the document. It is called hypertext link, also a hot link. By clicking on the elements that are displayed in a different color or element underlined hypertext document, the user, to activate the hyperlink. It is possible that it is possible to search by connections other elements via a hyper-link, to select a connection with the other elements of the World Wide Web server. The hyperlink is embedded in hypertext document in a tag of document creation language such as hypertext mark-up lan-guage and general-purpose document creation language standard.

WEB PAGE HYPERLINK

▪ metadata

It is data in structured data, data describ-ing the other data. Means data based on certain rules to utilize it efficiently locate the information they are looking from the large amount of information is given to the content. In this case, condition information content location and content, about the author, of the rights, terms and conditions, such as the use history is recorded. The computer, are usually used for the pur-pose for fast retrieval and data purposes to represent data and metadata.

WEB PAGE METADATA

WHERE YOU CAN GET DATA FOR CREATING A WEBSITE 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 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 Language, is a convenient text to be displayed in the web browser. When you load a copy of the web document, web page is displayed in the browser. Enter the URL of the web browser documentation used to live, to load a Web document .

NATURE OF HTML & XHTML ▪ HTML

Web pages are created using (Hypertext Markup Language) HTML is the work language used to create documents on World Wide Web.Hypertext Markup Language, is the main markup language in which you want to create the in-formation and other Web pages that can be displayed in a Web browser.Web browser is intended to read the HTML document to configure them to Web pages audible or visible.

▪ XHTML

XHTML ( Extensible Hypertext Markup Language ) is a family of XML markup language that extends language versions (HTML) Web pages was recorded hypertext markup language that is widely used or mirroring.

Known as If Extensible Hypertext Markup Language other, except that they are based on SGML instead of XML, which is consistent than XML is a markup language similar to HTML as a consequence of syntax tight to bring some results, tag representing a topic more specific SGML will be displayed in the browser.

Standard Generalized Markup Language , are defined in the framework of the application markup language very flexible but HTML , XHTML is an application of a significant subset XML, and SGML.

FEATURES OF HTML ▪ HTML

HTML elements, forms a block of all Web sites. It can be used to create interactive forms it is possible to include objects or HTML image. By showing the semantics of text structure of other items title, paragraphs, lists, links, and quotes, it will provide a way to create structured documents. This allows you to insert a script that has been written in languages such as JavaScript which affect the behavior of HTML Web page. HTML is using a special set of in-structions that specifies how to define the structure and layout of Web documents and tags, page is displayed in the browser.

To create a kind code, the computer, to view the file on a Web page or HTML file, it means that it is possible to use a browser other type of computer, HTML is platform independent. Page look the same regardless of the platform you are using. One of the biggest advantages of the web technology, it can be seen on the digital hardware of several types including mobile devices such as smart phones are the same Web page.

FEATURES OF XHTML ▪ XHTML

XHTML document has a root element only. It is a case, the value assigned, it must be recog-nized is closed in quotation marks, to nest elements of all variables. This is optional, unlike HTML, XHTML is an essential requirement. DOCTYPE declaration is to determine the rules of the document if obey.

This is not case-sensitive. Also, must be entered in lower case all the elements and attributes.All kinds of tags are consists of a start and an end tag of the tag.Tag is executed in order, but if an error occurs, unlike HTML, you can see them in the browser. Therefore, you will feel more comfortable HTML that do not display the results of the code failed.

The picture above , try a simple coding sites W3Schools.com

HTML is written in the form of an HTML element that contains the tag enclosed in parentheses (such as <HTML>) in the contents of a Web page. Is not paired to <IMG> for example for some tags shows the elements of empty, HTML tags come in pairs and <H1> like </ H1> The most commonly.

The start tag, the second tag is the end tag to the tag in the first of the pair. During this tag, Web designer, you can add the text of other types of content tags, comments, text-based.

HOW TO USE HTML

VARIOUS HTML TAG

HOW TO USE XHTMLThen, when using the XHTML, you must ensure that the HTML tags <html> document type declaration is set.

The term "document type declaration", refers to a method of determining the language that was used to create a Web document and tells the browser the content.The first line of most of the Web document type declaration, <It is sufficient to enter the tag of content DOCTYPE~>. 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 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 the language of the style to define the layout of the HTML document. For example, I am dealing with many things other font of CSS, colors, margins, line, height, width, back-ground image, position and altitude.

CSS was first developed in 1997, as a way for Web developers to define the look and feel of their Web pages.

The CSS, was not popular until around 2000, the Web browser was using the color of the CSS and the default font. And, all browsers modern that support both of CSS level 1, account-ing for most of the some aspects of CSS level 3 and CSS level 2.

Web designers do not use CSS for design and development of the Web site has become a thing of the past. Understanding the CSS to only know the HTML is important.

HTML can be used to add a layout to a Web site. However, CSS, has been refined more ac-curate, provides more options. Today, CSS, and is supported by all browsers.

FEATURES OF CSS ▪ CSS

CSS was innovative in the world of Web design.

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

It is to help keep it can be done in more detail the layout of the HTML CSS, background , and text. The design of all when <H1> tag redesigned <H1> tag is changed . You do not need to change each <H1> tag . CSS is very comfortable .

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 3: External (link to a style sheet)

Method 2: Internal (the tag style)

4. TERMINOLOGY▪ AUTHORING

▪ SITES

▪ UPLOADING

▪ FILE TRANSFER PROTOCOL (FTP)

AUTHORING ▪ Authoring

It is a computer-based system that enables content creation for production systems and Au-thoring, of intelligent tutoring systems.It is also in the process to create a CD or DVD authoring and DVD authoring and creation of optical disk, from material of multimedia source.

▪ Web Authoring

It mean making Web site. Authoring system, to create a software to create multimedia appli-cations for multimedia objects. In computing, the process of composing a courseware, web page, or a multimedia application with text, sound, still and video pictures, and animation. Au-thoring also includes creating navigating and other tools that allow interaction between the user and the application.

SITES ▪ Sites

Site is a host computer system that provides FTP, and Internet services such as telnet and gopher.This is short for Web site. Including the start-up files, Web sites is subject to a specific collec-tion. Also web site of many companies, there are individual pages.

For example, Google site web page that is connected to the address is https://www.google.-co.uk/.

▪ Example Site

http://www.youtube.com/

https://www.google.co.uk/

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

UPLOADING ▪ Uploading

In a single computer system, the upload is to transfer files to the computer system larger. When you upload a file from the point of view of network users, the computer on which you receive it, you can send it to other computers.

Normally, it is transferred to a small computer with a larger computer. I have received the file on the point of view of Internet users from other computers.

The File Transfer Protocol (FTP) is the Internet facility for downloading and uploading files.

Not attachments just, this is a download upload when sending and receiving e-mail attach-ments. However, in practice, I use the upload for many people the meaning of the transmis-sion simply upload.

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? ▪ upload or download

After the upload, and download with reference to the process of transferring the file. When you transfer a file, a copy is made to a selected loca-tion.

Upload means to transfer files from one com-puter to another own.For example, it means that you want to transfer to my PC when you save the file Web hosting my site Yahoo.

Download means to transfer files from another computer individually. You can download the file to the home PC in a Web hosting your account .

FILE TRANSFER PROTOCOL ▪ file transfer protocol (FTP)

FTP stands for file transfer protocol. As the name implies, it is used to transfer files between computers on a network. It is possible to use FTP to exchange files and access file transfer, online software archive between the desktop computer and computer account. I remember, but before you connect using frequently, FTP site of the many, is required several attempts.

Communication protocol used for stands for File Transfer Protocol, to transfer files over the network of the Internet FTP is. There are a method to help to be able to transfer files from one computer to another arbitrary via the Internet, also referred to generically such programs.

When using FTP, can be purchased at low cost or free programs and various data that they want. In addition, I can capacity to speed transmit and receive large files. Legitimate qualifica-tion, that is, can be connected to a remote host computer necessary need a user ID and password to use the remote host computer when you send and receive files.