Web Authoring

1. Web Authoring Hyojeongkim

2. Index

3. 1. Web page ▪ Web page, Web page construction ▪ Text ▪ Fonts ▪ Color ▪ Image ▪ tables ▪ Hyperlinks ▪ metadata

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

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

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

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

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

9. Web page font ▪ TOP 10 favorite free Fonts ▪ 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. FedraSans • 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. • 1. Myriad Pro • 2. League Gothic • 3. Cabin • 4. Corbel • 5. Museo Slab • 6. BebasNeue • 7. Ubuntu • 8. Lobster • 9. Franchise • 10. PT Serif

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

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

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

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

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

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

17. 2. HTML ▪ Nature of HTML and XHTML ▪ features of HTML and XHTML ▪ how to use HTML and XHTML

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

19. 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 XMLrather 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.

20. features ofHTML • ▪ 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.

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

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

23. Various html tag

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

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

26. 3. CSS ▪ Nature of cascading style sheets ▪ features of CSS ▪ how to use CSS

27. 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 CSSLevel 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.

28. features ofCSS • ▪ 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.

29. 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)

30. how to use CSS Method 2: Internal (the tag style) Method 3: External (link to a style sheet)

31. 4. Terminology ▪ Authoring ▪ Sites ▪ Uploading ▪ file transfer protocol (FTP)

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

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

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

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

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

37. Reference • http://dic.naver.com/ • http://en.wikipedia.org/wiki/ • http://www.discmakers.com/authoring/ • http://www.javascriptkit.com/howto/xhtml_intro4.shtml