WEB PROTOCOL GUIDELINES 24 OCT 2013 WEB AUTHORING
WEB PROTOCOL GUIDELINES 24. OCT. 2013 WEB AUTHORING SUBIN JIN(SOPHIA)
INDEX 0. PROTOCOL 1. WEB PAGE 2. HTML 3. CSS 4. TERMINOLOGY
2013 WEB PROTOCOL GUIDELINES PROTOCOL_ CONCEPTUAL UNDERSTANDING What is protocols? Before we talk about web page construction, we need to know concept of web protocols. What is protocols? Why it is important? Because it means the standards, rules and accepted conventions. It is the start and the core of web. HTTP is Hyper Text Transfer Protocol, it is a protocol that are used on the Web. It is rules for delivered to the user of web, and it is a standard delivered from all of common web server to the clients. When a user request documents user want by the web browser, server change the document and web browser converted this document to the appropriate type again. And it become displayed to the user. So, it serves to transmitting files that contains web pages to user based on web protocols. 즉, In other words, when we communicate with Englishman, he can’t understand our words if we speak Korean. Likewise, people made standards that can communicate with all of webs. We called this standards a protocol, and when we communicate on the web, we can communicate to match web protocols.
2013 WEB PROTOCOL GUIDELINES PROTOCOL_ WORK HOW THE MIND WORKS User’s computer - Internet – Web server(Google, Yahoo, etc. ) For example, we can see how the mind works when we write access to the google. 1. Enter http: //www. google. co. uk in the address bar using a web browser. 2. Web browser request information to the google web server by the HTTP protocols. 3. Web server receive requests, and it send the answer to the computer. 4. Web browser received the HTTP protocol information represented by texts and pictures.
2013 WEB PROTOCOL GUIDELINES PROTOCOL_ CONTENT What’s in it? Component of HTTP 1. Transfer time 2. My computer IP 3. Web server IP 4. Method(get/post) 5. HTTP protocol version(1. 0/1. 1) 6. File format(flash, file data, etc. ) 7. Reference(Previous web page address) 8. Language(Language type) 사용자 컴퓨터 - 인터넷 망 - 웹서버(구글, 야후 등등의 웹서버) 9. Encoding(Encoding type of Korean) 10. Information of web browser(IE 6. 0/Firefox 1. 0, etc. ) In the other words, You can see HTTP protocol is standards when you send a letter. The standards are as follows: Address and name, ZIP code of sender -> sending computer’s IP and information of web browser Address and name, ZIP code of receiver -> receiving computer’s address Letter’s information -> Request of sending computer 11. Cookies (Cookie values stored on my computer) 12. Real transfer content (id = iboss / password=1234, etc. )
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ WEB PAGE CONSTRUCTION STRUCTURE OF A WEB PAGE All web pages have the following basic structure: Web pages are now an essential part of people's lives and perform their * HTML - specifies that this is a web page jobs. More and more computer functions are now moving to web based applications and it is important that you are familiar with this technology. = Head - contains the title of the page with code and css includes = Body - displays the main page content Which can be represented in HTML code using the following Tags: <html> <head> <title>TITLE OF DOCUMENT</title> <style> CSS CONTENT </style> You can make some web sites using WYSIWYG editors such as Front Page and Dreamweaver. We are going to take a look at the code that these editors produce, and how to structure webpages with code. Open google page in any browser and click CTRL+U in Firefox / Chrome or View -> Page Source in Internet Explorer, you should have the webpage code in front of you. </head> <body> <b>CONTENT OF WEB, EXPRESS IN TAGS</b> </body> </html>
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ WEB PAGE CONSTRUCTION TAGS Block-level tags Web pages are built out of tags. These tags define what is on the page Block tags allow you give a tag attributes such and how it should be structured. There are two types of tags that you can use, and all tags should be written in lower case. 1. <h 1>A Book About Computing</h 1> 2. <hr /> You can see the first type, it has an opening tag <h 1> something in the middle "A book About Computing" and a closing tag</h 1>. This tells us that everything between these tags should be treated as a level one heading (h 1). On line two you can see the second type of tag, there is no closing tag, the tag is entirely self contained. The <hr /> stands for a horizontal rule, a line across the page. as padding and margin. This allows you to insert tags into various parts of a page. And rely on the other elements there to move to make space for it without worrying about overlap. Tag Content <h#></h#> headings <hr /> Horizontal rules <p></p> Paragraphs Make a new line <ol></ol> Ordered lists <ul></ul> Unordered lists <li></li> List items <div></div> div
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ WEB PAGE CONSTRUCTION INLINE TAGS HTML 5 These don't take up any physical space on the page (they don't cause a new line) and can overlap each other. 1. <span></span> : Break the page into sections but it don’t create new lines. 2. <strong></strong> : It makes text bold. 3. <em></em> : It makes text itallic. 4. <a></a> : It creates a link or an anchor. <a href=http: //www. google. com> link </a> produces the following link. 5. <img /> : It adds an image. What I have been learning so far are the very <img src =http: //en. wikipedia. org/wiki/File: Googlelogo. png” /> basics of web design. If I like what I've been doing I better check out HTML 5 is produces the following: starting to make websites fully interactive with the ability to quickly embed videos and interact with web pages. Over the next few years I'll increasingly see applications moving over to this new technology.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ TEXT PROPERTIES Text is the bare contents in web page construct. On the structural aspect, text properties is inline type, block type, inline-block type. And, in physical side, it can adjust the scale, colour, movement and shadows of text using Cascading Style Sheet. 항목 Block type Inline-Block type Value specified, (Does not specify) width= horizontal size of the parent Height = vertical size of the content Align Take effect on the alignment of text. (All of text align properties) Using margin(auto), padding (In the case of table, use vertical align) Take effect on the alignment of text. (All of text align properties) Box model Margin-left, right /padding, border, float Margin(If width value is fixed, you can intend for auto value) Margin(can’t auto), padding, border, float Nested elements Only inline Inline, block Only inline Characteristics Positions are treated similar to text. (Take effect on the vertical align) There should be no element in the sides. Positions are treated similar to text. (Take effect on the vertical align) Typical elements Span, a, strong, em Div, h 1~6, p, ul, li Img, input Area Inline type Contents Size
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ TEXT PROPERTIES O : In all versions of the browser supports the property ★ : Only new versions of the browser supports the property X : Not supports ※ The default value of this property is shown in bold Properties letter-spacing Values Internet Explore Fire Fox Safari Chrome Opera O O O O O O O <number> O O O auto O O O left O O O O justify O O O inherit O O O none O O O O O normal <length> Type Inheritance All Yes normal line-height text-align text-decoration <length> <percentage> right center underline overline-through Block All Yes Yes
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ TEXT PROPERTIES Properties text-indent text-shadow text-transform vertical-align Values Internet Explore Fire Fox Safari Chrome Opera O O O O O none X O O O ★ <color> X O O O ★ <length> <percentage> <x-offset> Type Inheritance Block Yes X O O O ★ <y-offset> X O O O ★ <blur> X O O O ★ none O O O O lowercase O O O baseline O O O super O O O O <length> O O O <percentage> O O O O O O O O capitalize uppercase sub <relative> All Inline Yes Yes normal white-space pre All Yes nowrap word-spacing normal <length> All Yes
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ FONTS IMPORTANCE OF FONTS In web design, font is most important part of web. Because it have a strong influence readability and visibility of web page. Readability of web page is relevant to typography, I have examples of serif and sans-serif. Information delivery capability of web depends on the use of fonts, and it is relevant to accessibility. Serif is a small line attached to the end of a stroke in a letter or symbol. Times new Roman is a representative font of serif. Serif has highly readable typography, but it is not consistent for Web page design. Sans-Serif Sans means ‘None’ in French. In the other words, it doesn’t have serif, and it is used accuracy and rapidity. Helvetica is a representative font of sans-serif, Apple’s display design use sans-serif fonts.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ FONTS FONT PROPERTIES The font property sets all the font properties. The properties that can be set, are (in order): "font-style font-variant font-weight font-size/line-height font-family". The font-size and font-family value is required. If one of the other value are missing, the default values will be inserted. You can practice in this web site(http: //www. w 3 schools. com/cssref/tryit. asp? filename=trycss_font) Property/Value Description Values font-style Specifies the font style. normal, italic, oblique, inherit font-variant Specifies the font variant. normal, small-caps, inherit font-weight Specifies the font weight. normal, bolder, lighter, 100 -900, inherit font-size/line-height Specifies the font size and the line-height. font-family Specifies the font family. caption Uses the font that are used by captioned controls (like buttons, dropdowns, etc. )percifies the font family. icon Uses the font that are used by icon labels menu Uses the fonts that are used by dropdown menus message-box Uses the fonts that are used by dialog boxes small-caption A smaller version of the caption font status-bar Uses the fonts that are used by the status bar inherit Specifies that the value of the font property should be inherited from the parent element none
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ COLOUR VALUES Colors are displayed combining RED, GREEN, and BLUE light. In CSS, color is defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value is 0 (hex 00). The highest value is 255(FF). The values are written as 3 double digit numbers, starting with a # sign. The combination of the Red, Green and Blue values from 0 to 255 give a total of more than 16 million different colors to display with (256 x 256). Most of modern monitors are capable of displaying at the least 16384 different colors. Color HEX Color RGB #000000 RGB(0, 0, 0) #FF 0000 RGB(255, 0, 0) #00 FF 00 RGB(0, 255, 0) #0000 FF RGB(0, 0, 255) #FFFF 00 RGB(255, 0) #00 FFFF RGB(0, 255) #FF 00 FF RGB(255, 0, 255) #C 0 C 0 C 0 RGB(192, 192) #FFFFFF RGB(255, 255)
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ COLOUR WEB SAFE COLOUR Few years ago, when computers supported max 256 different colors, lists of 216 "Web Safe Colors" was suggested as a Web standard. Now, This is not important, since the most computers can display millions of different colors, but the choice is left to user. The 216 cross-browser color palette was create to ensure that the all computers would displayed the colors correctly when running a 256 color palette.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ IMAGES IMAGE FORMAT There are many kinds of image formats, but JPG(JPEG), PNG, GIF is mainly used on the web. Then, What is the difference between these three factors? And What is the characteristic of each format? The main characteristics of the three image formats briefly be summarized as follows. Lossy compression method. It is a way to reduce the amount of JPG (JPEG) Format Quality Compression BMP 100. 0% 100% JPG 5. 2% 70% GIF 4. 1% 40% PNG 4. 7% 100% TIFF 11. 0% 100% image by damaging the original. The more I resaved images, the quality of the image is steadily declining disadvantage. (Deepening a staircase phenomenon) Actually, it is the most widely used image format on the web. Lossless compression method. Image format is a lossless GIF compression, but the color of the image can be stored in one is limited. But if images with more than 256 kinds of color like true color(24 bit) save as gif format, it is a loss occurs. Lossless compression method. Original images can be stored intact without any damage. It can give a transparent effect precisely by PNG adjusting the concentration of images If you look at the quality of the image when used to store pictures, it is often used. Because, there’s no damage.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ IMAGES JPG(JPEG) The first, JPG format is lossy compression. It is way to remove information that difficult to identified in images. And, it is merge these areas(difficult to identified), so the file size is reduce. When you save image files, if you lowered the image quality or save again and again, image is badly broken. For reference, complex and unclear images can't identify the difference. But, simple and clear images is detected damage more easily. So, JPG is a specific format for simple and unclear images. . HIGH QUALITY LOW QUALITY
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ IMAGES GIF similar color images aren't seriously damaged. ORIGINAL GIF is the lossless compression method, but it save only 256 colors is expressed. It is different from JPG, PNG format that support 24 bit(16, 777, 216 colors). So, images carrying more than 256 colors information can lose quality. However, 256 colors that are saved as GIF format is not fixed. when I saved the image files, 256 colors are determine. After decide the most common 256 colors in image, it reconfigure and save a image file. But, images in various colors and contrasts aren't good for GIF format.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ IMAGES PNG BMP(984 KB) PNG format is lossless compression method, it supported 24 bits colors and 8 bits alpha channel, 32 bit colors information. In other words, if we save a image as PNG format, the image is not damaged at all. Because, it is lossless compression method and supported all of colors. So, PNG format mainly used to save the original image. Let's compare PNG format to BMP format. BMP means PNG(596 KB) the source of the image. PNG images is not original, but it reduce the capacity of the image without any damage. So PNG format image is smaller than BMP's. But it is still bigger than JPG format and GIF format. PNG format is inefficient in photographs.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ IMAGES IMG TAG The way to express path It is indicated by the folder where the document is <img src = “file name or URL” > It means ‘image’ written. Image file name Command to load real image Real image address that stored in web If the images in subfolder Subfolder name/File name If the images in same folder File name The tag represented the images is denoted by img(acronym for image). Images have to defined as If the images in parentfolder. . /File name "THIS IS A IMAGE", because it doesn't represent text. It is the role of the image tag. The file path(URL) represents the address that contains the file. If the When the image exist in same folder images posted on the web, URL is image's address on : filename(ex. image 1. gif) the web. And, if it is just file of the computer, it means file path. When the image exist in subfolders : folder name/file name When the image exist in parent folder : . . /filename
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ TABLES TABLE TAG Table tag is used to make diagram on the HTML page. Diagram means frame divided into horizontal and vertical like excel sheet. If similar information is repeat, we can use table tag on the web. For example, class attendance, bank account transactions. In the past, table tag is used for layout of the web, and it used for make the gap. But it makes separation of code and design worse and more difficult to repair. Actually, table tag's processing speed is quiet slower than div tag. TAG MEANING tr Table Row th Table Header td Table Data tr tr td td
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ TABLES TABLE TAG PROPERTIES Tag <table> Description Defines a table Application <table border="1" bordercolor="red"> <th> Defines a header cell in a table <tr> Defines a row in a table <td colspan="2"></td></td> <td> Defines a cell in a table </tr><tr> <caption> Defines a table caption <colgroup> Specifies a group of one or more columns in a table formatting <col> Specifies column properties for each column within a <colgroup> element <thead> Groups the header content in a table <tbody> Groups the body content in a table <tfoot> Groups the footer content in a table <td rowspan="2"></td><td></td> </tr><tr> <td></td> </tr> </table>
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ HYPERLINKS WHAT IS THE HYPERLINK, HYPERTEXT, HYPERMEDIA? Hyperlink means 'connection'. It is the core concept of hypertext. Hypertext means documents that linked to another documents. It is same as normal text documents, but it can be connected to another documents. Hypertext documents can connect to any type connection beyond the physical and logical space. In other words, it can be said new concept of the form of documents. If you use Hypertext documents, you can read the necessary data at any time. And, this connection method can be said the Hyperlink plays a role in transfer to the document or file you want. But, in the internet, it can be access various media like text, sound, video, picture. So, it can be explained integration concepts. Connect
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ HYPERLINKS ATTRIBUTES EXAMPLE <a href="http: //www. google. co. uk">Visit Gooooogle!</a> Attribute charset Value char_encoding coords coordinates download filename href URL Specifies the URL of the page the link goes to hreflanguage_code Specifies the language of the linked document media_query Specifies what media/device the linked document is optimized for name section_name Not supported in HTML 5. Specifies the name of an anchor rel Alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag Specifies the relationship between the current document and the linked document rev text Not supported in HTML 5. Specifies the relationship between the linked document and the current document shape Default, rect, circle, poly target type Description Not supported in HTML 5. Specifies the character-set of a linked document Not supported in HTML 5. Specifies the coordinates of a link Specifies the hyperlink target to be downloaded Not supported in HTML 5. Specifies the shape of a link _blank, _parent, _self, _top, framename Specifies where to open the linked document MIME_type Specifies the MIME type of the linked document
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ METADATA CONCEPT OF METADATA Put simply, metadata is “DATA ABOUT DATA". It is not real data(video, audio, text, etc. ), but it provide information about real data. It can be described in this picture. Digital Camera can store metadata in the image. These metadata provide information of sensitivity, type of camera, exposure information, Shooting date. It able to find the exact information about the image. So, we can search and manage more easier. If you use metadata, you can check data's type and information. so, you can find the images you want more faster. In the other words, metadata is text, but it able to express for various types media.
2013 WEB PROTOCOL GUIDELINES WEB PAGE_ METADATA TAG PROPERTY EXAMPLE <head> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML, CSS, XML, Java. Script"> <meta name="author" content="Style References"> <meta charset="UTF-8"> </head> Attribute Value Description charset character_set Specifies the character encoding for the HTML document content text Gives the value associated with the http-equiv or name attribute http-equiv content-type, default-style, refresh name scheme Provides an HTTP header for the information/value of the content attribute application-name, author, description, Specifies a name for the metadata generator, keywords format/URI Not supported in HTML 5. Specifies a scheme to be used to interpret the value of the content attribute
2013 WEB PROTOCOL GUIDELINES HTML _ NATURE What is HTML? Uncomfortable, HTML is the abbreviation of "Hypertext Markup language". It is too long, but I have to mention it. Because "Hyper. Text Markup Language" is most effective word to explain HTML. Hypertext means document systems that can be choose information you want. Analog book delivered information sequentially, but internet based on hypertext system provide information non-sequential. In the internet, you can get what you want in the various documents based on Connections. So, What is the 'Mark-up'? We can find answers in Web's history. At first, internet was comprised of text, because computer's performance was not good. But web has develped greatly, so developer have to express the webdesign more specifically. And, CSS and Javascript was developed, it helps designing the web. CSS express the phisical design and Javascript make web dynamically. When these language is working, it is connect to the HTML. So, HTML can be described a frame of the web. And, Mark-up can be explained "Making the frame". Hypertext Markup Language = The Language that markup the structure of Hypertext, This is HTML's Nature.
2013 WEB PROTOCOL GUIDELINES HTML _ FEATURES 1. There's no case-sensitive in tags. If you use capital letters, computer recognizes it same as lower case. 2. Filename extension is '. htm' or '. html'. You can use HTML filename extension either on '. htm' or '. html'. But. htm is different than. html. 3. Enter, Space bar, Tab does not apply to HTML. When you create some empty spaces, it will not apply to HTML sources. If you want to make some spaces, you should to use special character or tags that recognize the space. 4. You have to follow the order of tags. Most tags consists of a pair of couple, beginning tag and exit tag. You have to follow the order about beginning tag and exit tag. 5. It implement sequentially from beginning to end. HTML implement sequentially from beginning to end. In the other word, it implement the content of <head>, and next it implement the order of <body>. So, javascript and css define in <head>.
2013 WEB PROTOCOL GUIDELINES HTML _ HOW TO USE START TO HTML Step 1: Start Notepad Type[Start] - [All Programs] - [Accessories] - [Notepad]: Step 2: Edit Your HTML with Notepad Type your HTML code into your Notepad:
2013 WEB PROTOCOL GUIDELINES HTML _ HOW TO USE START TO HTML Step 3: Save Your HTML Select [Save as] in Notepad's file menu. When you save an HTML file, you can use either the. htm or the. html file extension. There is no difference, it is entirely up to you. Save the file in a folder that is easy to remember. Step 4: Run the HTML in Your Browser Start your web browser and open your html file from the File, Open menu, or just browse the folder and double-click your HTML file. The result should look much like this:
2013 WEB PROTOCOL GUIDELINES HTML _ HOW TO USE HTML BASIC This is basic coding of HTML. <html> <head> HTML’ basic structure is comprised <title>TITLE OF DOCUMENT</title> of <header>, <body>. CSS style and <style> CSS CONTENT </style> metadata is in the <header>. And, </head> basic <body> structure and information of the web is in <b>CONTENT OF WEB, EXPRESS IN TAGS</b> <body>. </body> </html> HTML can be edited by using a professional HTML editor like this. Use method depends on HTML editor. Adobe Dreamweaver Microsoft Expression Web contents, Microsoft Expression Web Coffee Cup HTML Editor
2013 WEB PROTOCOL GUIDELINES XHTML _ NATURE What is XHTML? * XHTML stands for EXtensible Hyper. Text Markup Language * XHTML is almost identical to HTML 4. 01 * HTML is a stricter and cleaner version of HTML 4. 01 * XHTML is HTML defined as an XML application * XHTML is supported by all major browsers. * XHTML is a W 3 C Recommendation Why we use XHTML? Many pages on the internet contain "bad" HTML. XML is a markup language where documents must be marked up correctly and "wellformed". Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup language. Therefore - by combine the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML. Extensible = Able to extend
2013 WEB PROTOCOL GUIDELINES XHTML _ FEATURES 1. <!DOCTYPE. . > is mandatory. 6. Attribute values must be quoted. AXHTML document must have XHTML DOCTYPE declaration. <table width=100%> (X) 2. XHTML elements must be properly nested. <table width="100%">(O) <b><i>This text is bold and italic</b></i> (X) 7. Attribute minimization is forbidden. <b><i>This text is bold and italic</i></b> (O) <input checked> 3. Empty elements must also be closed. <input readonly> An image: <img src="happy. gif" alt="Happy face"> (X) <input disabled> An image: <img src="happy. gif" alt="Happy face" /> (O) <option selected> 4. XHTML elements must be in lower case. <input checked="checked"> <P>This is a paragraph</P> (X) <input readonly="readonly"> <p>This is a paragraph</p> (O) <input disabled="disabled"> 5. Attribute names must be in lower case. <table WIDTH="100%"> (X) <table width="100%“> (O) <option selected="selected"> (X) (O)
2013 WEB PROTOCOL GUIDELINES XHTML _ FEATURES The Most Important Differences from HTML Document Structure XHTML Elements XHTML Attributes § XHTML DOCTYPE is mandatory § The XML namespace attribute in <html> is mandatory § <html>, <head>, <title>, and <body> is mandatory § XHTML elements must be properly nested § XHTML elements must always be closed § XHTML elements must be in lowercase § XHTML documents must have one root element § Attribute names must be in lower case § Attribute values must be quoted § Attribute minimization is forbidden
2013 WEB PROTOCOL GUIDELINES XHTML _ HOW TO USE XHTML If you use XHTML, check the markup is valid and well-formed, as the specifications are strict than what you used to. Rather than building the web pages that work and look the way you want, using XHTML means a try to maintaining a high standard within your page structures. DOCTYPE code is most commonly format, and it is divided into Transitional form and Strict form. HTML 4. 01 Transitional support tags that was in the past, and it support missing tags. HTML 4. 01 strict applied HTML strictly. The best way to define DOCTYPE is using Strict form. It able to define all of the HTML tag properties by CSS. In the other words, if you write 'b{fontweight: normal; }, <b> does not see bold strokes. However, we have to use <embed> or non-standard tags because of the compatibility of web. So best document format that provides the best browser compatibility is XHTML 1. 0 Transitional. XTML 1. 1 STANDARD FORM <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 1//EN" "http: //www. w 3. org/TR/xhtml 11/DTD/xhtml 11. dtd"> <html xmlns="http: //www. w 3. org/1999/xhtml" xml: lang="ko-KR"> <head> <title>TITLE OF DOCUMENT</title> </head> <body> </html>
2013 WEB PROTOCOL GUIDELINES CSS _ NATURE What is CSS? = CSS stands for Cascading Style Sheets. = Styles define how to display HTML elements = Styles were added to HTML 4. 0 to solve a problem = External Style Sheets can save a lot of work = External Style Sheets are stored in CSS files HTML was never intended to contain tags formatting a document. HTML was intended to define the content of a document, like: <p>I am sophia. </p> When tags like <font>, and color attributes were added to the HTML 3. 2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W 3 C) created CSS. In HTML 4. 0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today.
2013 WEB PROTOCOL GUIDELINES CSS _ FEATURES 1. Rich style effect = It is possible to expression that not possible in HTML. = margin, border, padding, layout, etc. 2. Easy to use = It save information about visual effects in one place(CSS file), without distributed. = If you change the <h 2> tag property to purple in all pages, <h 2><font color="purple">Purple title 1, /font></h 2> If the webpage is 20 pages, you have to change 20 times. 3. Cascading = Able to process the opposite regulation. = Able to apply again to another pages. = Able to redefine regulation that already defined. Able to change CSS for the blind people and elderly people. 4. Small file size = Gone meaningless elements like table tag for layout and font tag, etc. = File size becomes more smaller, and able to reduce the loading time. = More faster loading time, because it doesn't load the CSS that already loaded. .
2013 WEB PROTOCOL GUIDELINES CSS _ HOW TO USE HOW TO INSERT CSS = External style sheet : The style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section. <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> </head> = Internal style sheet : An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this <head> <style> hr {color: chocolate; } p {margin-right: 5 px; } body {background-image: url("images/subin. jpg"); } </style> </head> = Inline style : To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. <p style="color: sienna; margin-left: 20 px; ">This is a paragraph. </p>
2013 WEB PROTOCOL GUIDELINES CSS _ HOW TO USE CSS RULES = A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value. CSS EXAMPLES = A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: (1) In the case of Id selector (2) In the case of Class selector #p{ . contents { color: blue; Font-size: 12 px; } }
2013 WEB PROTOCOL GUIDELINES TERMINOLOGY_ AUTHORING Authoring is the process of creating, used to describe the process of designing and, at a technical level, building a website, CD-ROM or DVD. While authoring may extend to content creation (writing text, creating images, etc. ), common usage infers an point on programming/coding. WEB-AUTHORING APPLICATION/TOOL A computer program used to create or maintain websites is often referred to as a ‘web-authoring tool’. Examples include: Macromedia Dreamweaver, Adobe Go-live Cyberstudio, Microsoft Front. Page, and BBEdit. Adobe Dreamweaver Go-live Cyberstudio Microsoft Front-page BBEdit
2013 WEB PROTOCOL GUIDELINES TERMINOLOGY_ SITES A site is a related collection of World Wide Web (WWW) files that include a beginning file called the home page. It is hosted on at least one web server that able to connect via the internet or LAN. Web page expressed in the form of HTML/XHTML, but generally, it is document written in a string. Web pages are connected via HTTP, sometimes it provides security and Privacy to user using encryption over HTTPS. All Web sites which can be connected in officially are collectively make up the World Wide Web. TYPES of WEBSITES Websites can be divided into two broad categories - static and interactive. Some web sites are produced for personal use or entertainment. Many web sites do aim to make money, using one or more business models. There are many kinds of websites, each specializing in a particular type of content or use. A few such divisions might include, (1) Blog : Sites generally used to post online diaries which may include discussion forums. (2) Community site : A site where persons with similar interests communicate with each other. (3) e-commerce : A site offering goods and services for online sale and enabling online transactions for such sales. (4) Government Site : A website made by the local, state, department or national government of a country. (5) News site : Similar to an information site, but dedicated to dispensing news, politics, and commentary. (6) Social networking site : site where users could communicate with one another and share media. (7) Wiki site : A site which users collaboratively edit its content.
2013 WEB PROTOCOL GUIDELINES TERMINOLOGY_ 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. People who share images with others on Facebook upload files to the Facebook. And 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. 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, 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.
2013 WEB PROTOCOL GUIDELINES TERMINOLOGY_ FTP The File Transfer Protocol is the Internet facility for downloading and uploading files. It is a standard Internet protocol for transmitting files between computers on the Internet. Like the Hypertext Transfer Protocol (HTTP), which transfers displayable Web pages and related files, and the Simple Mail Transfer Protocol (SMTP), which transfers e-mail, FTP is an application protocol that uses the Internet's TCP/IP protocols. FTP is commonly used to transfer Web page files from their creator to the computer that acts as their server for everyone on the Internet. It's also commonly used to download programs and other files to your computer from other servers.
WEB PROTOCOL GUIDELINES WEDESIGNYOU 2013 SUBIN JIN
- Slides: 44
