Wireframe :: tistory wireframe tistory.

Size: px
Start display at page:

Download "Wireframe :: tistory wireframe tistory."

Transcription

1 Page 1 of 45 Wireframe :: tistory wireframe tistory Daum Tistory GO Home Location Tags Media Guestbook Admin 'XHTML+CSS' /09/20 [ ] XHTML CSS - 6 (2) /07/23 [ ] XHTML CSS - 5 (6) /07/17 CSS - Float (6) /07/14 [ ] XHTML CSS /04/26 [ ] XHTML CSS - 3 (2) /04/19 [ ] XHTML CSS - 2 (6) /04/01 [ ] XHTML CSS - 1 New Post [ ] XHTML CSS /09/20 10:17, ,, Notice Tags (21) (2) (0) (1) (4) wireframe unplugged (3), 3, 1024x768, (,! ),, ( footer ;) CSS layout irfanview CSS css Xthml css float CSS float xhtml css float CSS XHTML+CSS XHTML css float 11 xhtml css XHTML/CSS Recent Entries [ ] (2) [ ] XHTML CSS - 6 (2) [ ] XHTML CSS - 5 (6) CSS - Float (6) [ ] XHTML CSS - 4 -, CSS Recent Comments John John John `` Only ~~

2 Page 2 of 45 Recent Trackbacks Archives 2010/04 (1) 2009/12 (1) 2009/09 (3) 2009/07 (4) 2009/06 (3) HTML ( ) «2014/04» Links Wireframe Total : 23,688 Today : 4 Yesterday : 7, CSS css, description

3 Page 3 of 45, ul li ul li 1 2, 2 (ul > li > ul > li)

4 Page 4 of 45, (, )

5 Page 5 of 45,,, (#) (),, a:hover (*CSS2 :hover IE6 ;;;) class="first"

6 Page 6 of 45 ul display:block, 100% li float:left list ul, (ul float:left ul border ),?, CSS ' ' ( p ), 10px, 10px, p p 20px, / ( 10px ) ( p 20px, ), 10px 20px ( ) p:first-letter,,

7 Page 7 of 45, a,

8 Page 8 of 45?, /, ( ) css, CSS, ~~~ html &css : layouttesthtml css_testcss tags : CSS, CSS layout, css, XHTML+CSS, Xthml,, Trackback 0 : Comments 2 [ ] XHTML CSS /07/23 02:53, 80% ) ( 10 BETA2

9 Page 9 of 45 HTML? CSS, - _-; CSS (, " **" layout_testcss html head <link rel="stylesheet" type="text/css" href="/layoutcss" /> CSS,, (?) layout_testcss,, css 1 css, notepad++ UTF-8, utf-8 "utf-8"; 2 block HTML,,

10 Page 10 of 45,, block html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; background:transparent; } html, body, div, p, span, h1, h2, h3, h4, h5, blockquote, a, pre, big, small, del, ins, em, strike, sub, sup, b, u, i, i, ol, ul, li {margin:0; padding:0; border:0; background:transparent; }, CSS2 universal selector, * {margin:0; padding:0; border:0; background:transparent; },, IE * (?), <!-- --> ( ),, 3 body body,, body,

11 Page 11 of 45, 600px,,, 800px, 1024px 4, css,, div#wrapper div wrapper #wrapper 600px margin 0 auto 0 auto, (0px px )

12 Page 12 of 45 auto ( wrapper body) 5 80px 6 nav nav 600px 1/4 css?

13 Page 13 of 45, sidebar content ( ) 7 wrapper 600px nav 150px content 1px 449px content content padding/margin article margin footer padding (footer ) min-height,,, content 400px min-height max-height float (?), nav

14 Page 14 of 45 ~ 8 footer header footer float clear, content margin padding margin? (, css ) ( )

15 Page 15 of 45,,, (?) css ~ tags : CSS float, css, css, XHTML+CSS, xhtml css Trackback 0 : Comments 6 CSS - Float 2009/07/17 13:32

16 Page 16 of 45 float css float css float margin position HTML <body> <div id="spdiv">content of DIV whose id is "spdvi"</div> <div id="nordiv">blah~ blah~ * 100 </div> < /body> body div ( ) div, spdiv? #spdiv{ width:300px; } block div float ' ' float p img{ float:left; } p float left #spdiv{ width:300px; float:left; } ( div ) float spdiv nordiv ( ) spdiv div

17 Page 17 of 45 nordiv 500px? nordiv float left #nordiv{ width:500px; float:right; } ( ) float, float:left float ' ', float div? <body> <div id="spdiv">content of DIV whose id is "spdvi"</div> <div id="nordiv">blah~ blah~ * 100 </div> <div id="thirddiv"> < /body> div thirddiv float div float body thirddiv (spdiv, nordiv) float ( ) thirddiv, spdiv nordiv (?) div body, ( spdiv,nordiv )

18 Page 18 of 45? spdiv nordiv thirddiv, nordiv float:left? body float width body width, noddiv ( ) thirddiv nordiv float thirddiv float clear (width ), width (width margin, border, padding ) float thirddiv? float clear:both #thirddiv{ clear:both } box

19 Page 19 of 45 clear #thirddiv <body> <div id="wrapper"> <div id="spdiv">content of DIV whose id is "spdvi"</div> <div id="nordiv">blah~ blah~ * 100 </div> </div> < /body> spdiv nordiv wrapper div wrapper ' ' #wrapper{ width:900px; background-color:#ffffc3; /* */ } float wrapper, 1 wrapper float float wrapper 2 nordiv, div clear:both float html ] ( orz) [ CSS : ) CSS ( CSS2 IE6 tags : block layout, CSS, CSS float, css, float, XHTML+CSS Trackback 0 : Comments 6 [ ] XHTML CSS - 4 wireframe unplugged 2009/07/14 22:23

20 Page 20 of 45 float -, F5,,, 4 ( ) 100% ' ' body ( ) ' ', [ ' ' ], wireframe

21 Page 21 of 45 html DOCTYPE meta notepad++,, CSS / ( ) div body div id wrapper, wrapper header, nav, section, footer div

22 Page 22 of 45 ( ) <h1> h2, h3, h4, h5, h6 Nav nav nav ul ( ) li ul > li h4 ( ) ul

23 Page 23 of 45 nav Link,,, content article ( ) article article_header entry ( )

24 Page 24 of 45 content id class article IE6 id (??) h2 entry p

25 Page 25 of 45 br p p, article 3

26 Page 26 of 45 div p wrapper,, 10 Beta wrapper wrapper header small

27 Page 27 of 45 nav content

28 Page 28 of 45 content article article_header entryl

29 Page 29 of 45 entry entry p p

30 Page 30 of 45?, css XHTML, ( ) CSS tags : XHTML, XHTML+CSS, xhtml css Trackback 0 : Comment 0 [ ] XHTML CSS /04/26 03:09 3 CSS, 1,,

31 Page 31 of 45 box ' ' CSS ( ' ', CSS ) CSS 2 CSS div div [division], ' ' ' ' ' ', css HTML ( ) ' ' ' ' CSS ' ',, ( ),? 3,, css (?) (margin) : margin (padding) : padding ' ', (border) (border) :, (width) : IE6 ' ' IE6 CSS (height) :,,

32 Page 32 of ) width width, 'width' ' ' WIDTH 300px, width 300px ' ' 30px, 10px x2+10x2 = 380px IE6 ' ', ' ', IE6 300px,, IE6,, IE6 padding CSS hack width 100%, ' ' 2)height, ' ' ' ', ' '

33 Page 33 of 45, 3)margin, box box 'auto', 4)padding, ( ) (?) IE6 0, 5)border,, ( 1,2 ) 5 CSS } { : ; : ; : ; p {background-color:white; border:1px solid black;} { : ;} p img {border:1px dotted blue;} #ID { : } class { : } #first { background-color:#4e63b8;} pemphasized {font-weight:bold;} 1, 2 { : } ol li, ul li{font-size:07em;},, - p img, div img p img {} HTML ID #, class class 6 html head style 1), h2 / ( ) h2 ' ' ( )

34 Page 34 of 45 (*) ' ' 0, 2), first ( first html id='first' )

35 Page 35 of 45, 200px 3) ( ) ( ' ') overflow overflow auto,, overflow:hidden;

36 Page 36 of 45 4) CSS,, ' ',, div float, #first float:left? float, float " " ' ', first float:left second first ( ) second second ( body ) second

37 Page 37 of 45 first second 5) second 200px,,

38 Page 38 of 45

39 Page 39 of 45, ( ), ( History)? left, 6), second float:right ( ), right,, float:left

40 Page 40 of 45 third, clear:left,

41 Page 41 of 45 css ~~ tags : CSS, css float, css, css, float, XHTML, xhtml css, XHTML+CSS Trackback 0 : Comments 2 [ ] XHTML CSS /04/19 17:47 ' ' XHTML (?), CSS 1 XHTML CSS, (XHTML ' ' ),,, CSS2 ' ' IE6 CSS CSS IE6,,, WYSIWYG, ( ) html ( ), notepad++ ( notepad++ notepad++,, wireframe! (notepad++ ) 2, XHTML 2 CSS 3 HTML, (!) 3 XHTML (?) UTF-8 (, ' ' [UTF-8] ) DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN"" transitionaldtd"> html html <html> </html> <html> </html> html body, head head <html> <head> </head> <body> </body>

42 Page 42 of 45 </html> head, mp3 ID3, ( ), 4 head title title <title> Sample Page </title> meta meta, http-equiv <meta http-equiv="content-type" content="text/html;charset=utf-8" /> meta /> img br ' ' ' html, UTF-8' http-equiv, Content-Type,, ( text/html http ) Content-Length : Date : Expires : Last-Modified : Location : Set-Cookie : Refresh,, ' ',,, ( ' ', ) meta ' ' lang lang meta, html lang, xhtml xml, <html lang="ko">, <html xmlns=" lang="ko" xml:lang="ko"> 5 body head, wikipedia css div 'first','second','third' id div 'wrapper' body <div id="wrapper"> < div id="first"> </div> < div id="second"> 2 2 2</div> < div id="third"> </div> < /div>, div h2, ) (, ' '

43 Page 43 of 45 6 CSS,, CSS, XHTML, CSS CSS?, 'css', 7 CSS CSS 2 html, css head style 2 <div style=" 3 head link css 4 css import css 2, 1 3, 4, head style style,, css, css, *,, wireframe CCL copyright

44 Page 44 of 45 tags : CSS, XHTML, XHTML+CSS, XHTML/CSS, Trackback 0 : Comments 6 [ ] XHTML CSS - 1 wireframe unplugged 2009/04/01 00:46 IT, XHTML, XHTML CSS 1 XHTML? XHTML extendible HyperText Markup Language HTML ' 2XML ' HTML, XHTML, XML, XML XML XHTML XHTML HTML, HTML ( ) XML - ' ' -, - http HyperText Transfer Protocold HTML XML (formation) ' ' ' ', ' ' ' ', ' ' / " " XML XML, XML XML, http HTML 3 XHTML 20 ' ' ' ' ' 4 XHTML 5 ' '? ' ', ' ' ' ',, XHTML XML HTML? ' ' XHTML HTML XML, XHTML XHTML ( CSS ) XHTML HTML, XHTML HTML ' XHTML ' ' HTML 401 ' DTD, DTD XML ' <!DOCTYPE >, XHTML 10 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" "

45 Page 45 of 45,, (DTD ) XHTML 10 Transitional XHTML 10 Strict XHTML 10 Frameset XHTML 11 Strict (11 Strict ) HTML 401 Transitional HTML 40 Transitional HTML 40 Frameset Frameset DTD Strict strict img,, (font ),,,, 6 XHTML 10 Transitional, ' ' ( ), (< >) (</ >), <img />, <br />, html html (xml root ) <meta>, <link>, <style>, <script> <head> <td> <table> 1 <div> < script src="get_moviejs"></script> : body 2 < /body> < /html> < html> : html 2 <div 3 <TABLE BORDER=1 : WYSIWYG 7 XHTML ' ',,, XHTML XHTML, CSS tags : CSS, XHTML, XHTML+CSS, xhtml css, Trackback 0 : Comment 0 PREV : [1] : NEXT 's Blog is powered by Daum Design by SmallPark and Rest

"utf-8";

utf-8; http://salsa-copacabana.com/css/import.css @charset "Shift_JIS"; /* ------------------------------------------ File name: import.css Style Info: CSS screen Windwos IE4 ------------------------------------------

More information

HTML: Parsing Library

HTML: Parsing Library HTML: Parsing Library Version 4.1.3 November 20, 2008 (require html) The html library provides functions to read html documents and structures to represent them. (read-xhtml port) html? port : input-port?

More information

HTML: Parsing Library

HTML: Parsing Library HTML: Parsing Library Version 6.7 October 26, 2016 (require html) package: html-lib The html library provides functions to read conformant HTML4 documents and structures to represent them. Since html assumes

More information

Oliver Pott HTML XML. new reference. Markt+Technik Verlag

Oliver Pott HTML XML. new reference. Markt+Technik Verlag Oliver Pott HTML XML new reference Markt+Technik Verlag Inhaltsverzeichnis Übersicht 13 14 A 15 A 16 ABBR 23 ABBR 23 ACCEPT 26 ACCEPT-CHARSET

More information

Chapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT.

Chapter 2:- Introduction to XHTML. Compiled By:- Sanjay Patel Assistant Professor, SVBIT. Chapter 2:- Introduction to XHTML Compiled By:- Assistant Professor, SVBIT. Outline Introduction to XHTML Move to XHTML Meta tags Character entities Frames and frame sets Inside Browser What is XHTML?

More information

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS

HTML TAG SUMMARY HTML REFERENCE 18 TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES TAG/ATTRIBUTE DESCRIPTION PAGE REFERENCES MOST TAGS MOST TAGS CLASS Divides tags into groups for applying styles 202 ID Identifies a specific tag 201 STYLE Applies a style locally 200 TITLE Adds tool tips to elements 181 Identifies the HTML version

More information

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information

More information

The [HTML] Element p. 61 The [HEAD] Element p. 62 The [TITLE] Element p. 63 The [BODY] Element p. 66 HTML Elements p. 66 Core Attributes p.

The [HTML] Element p. 61 The [HEAD] Element p. 62 The [TITLE] Element p. 63 The [BODY] Element p. 66 HTML Elements p. 66 Core Attributes p. Acknowledgments p. xix Preface p. xxi Web Basics Introduction to HTML p. 3 Basic HTML Concepts p. 4 HTML: A Structured Language p. 7 Overview of HTML Markup p. 11 Logical and Physical HTML p. 13 What HTML

More information

Index. CSS directive, # (octothorpe), intrapage links, 26

Index. CSS directive, # (octothorpe), intrapage links, 26 Holzschlag_.qxd 3/30/05 9:23 AM Page 299 Symbols @import CSS directive, 114-115 # (octothorpe), intrapage links, 26 A a element, 23, 163, 228 abbr element, 228 absolute keywords for font sizing, 144 absolute

More information

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1

COPYRIGHTED MATERIAL. Contents. Chapter 1: Creating Structured Documents 1 59313ftoc.qxd:WroxPro 3/22/08 2:31 PM Page xi Introduction xxiii Chapter 1: Creating Structured Documents 1 A Web of Structured Documents 1 Introducing XHTML 2 Core Elements and Attributes 9 The

More information

Symbols INDEX. !important rule, rule, , 146, , rule,

Symbols INDEX. !important rule, rule, , 146, , rule, Symbols!important rule, 209 @import rule, 140-144, 146, 155-156, 157 @media rule, 155-156 A element. See anchors abbr attribute, 36-37 element, 87, 90-91 absolute positioning, 177, 178, 182,

More information

QUICK REFERENCE GUIDE

QUICK REFERENCE GUIDE QUICK REFERENCE GUIDE New Selectors New Properties Animations 2D/3D Transformations Rounded Corners Shadow Effects Downloadable Fonts @ purgeru.deviantart.com WHAT IS HTML5? HTML5 is being developed as

More information

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ /* bidi */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ /* bidi */ / BEGIN LICENSE BLOCK Version: MPL 1.1/GPL 2.0/LGPL 2.1 The contents of this file are subject to the Mozilla Public License Version 1.1 (the "License"); you may not use this file except in compliance with

More information

CPET 499/ITC 250 Web Systems. Topics

CPET 499/ITC 250 Web Systems. Topics CPET 499/ITC 250 Web Systems Lecture on HTML and XHTML, Web Browsers, and Web Servers References: * Fundamentals of Web Development, 2015 ed., by Randy Connolly and Richard Hoar, from Pearson *Chapter

More information

WML2.0 TUTORIAL. The XHTML Basic defined by the W3C is a proper subset of XHTML, which is a reformulation of HTML in XML.

WML2.0 TUTORIAL. The XHTML Basic defined by the W3C is a proper subset of XHTML, which is a reformulation of HTML in XML. http://www.tutorialspoint.com/wml/wml2_tutorial.htm WML2.0 TUTORIAL Copyright tutorialspoint.com WML2 is a language, which extends the syntax and semantics of the followings: XHTML Basic [ XHTMLBasic ]

More information

Evaluation of alignment methods for HTML parallel text 1

Evaluation of alignment methods for HTML parallel text 1 Evaluation of alignment methods for HTML parallel text 1 Enrique Sánchez-Villamil, Susana Santos-Antón, Sergio Ortiz-Rojas, Mikel L. Forcada Transducens Group, Departament de Llenguatges i Sistemes Informàtics

More information

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.:

Internet publishing HTML (XHTML) language. Petr Zámostný room: A-72a phone.: Internet publishing HTML (XHTML) language Petr Zámostný room: A-72a phone.: 4222 e-mail: petr.zamostny@vscht.cz Essential HTML components Element element example Start tag Element content End tag

More information

Deccansoft Software Services

Deccansoft Software Services Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module

More information

Lab 4 CSS CISC1600, Spring 2012

Lab 4 CSS CISC1600, Spring 2012 Lab 4 CSS CISC1600, Spring 2012 Part 1 Introduction 1.1 Cascading Style Sheets or CSS files provide a way to control the look and feel of your web page that is more convenient, more flexible and more comprehensive

More information

introduction to XHTML

introduction to XHTML introduction to XHTML XHTML stands for Extensible HyperText Markup Language and is based on HTML 4.0, incorporating XML. Due to this fusion the mark up language will remain compatible with existing browsers

More information

Certified HTML Designer VS-1027

Certified HTML Designer VS-1027 VS-1027 Certification Code VS-1027 Certified HTML Designer Certified HTML Designer HTML Designer Certification allows organizations to easily develop website and other web based applications which are

More information

ROLE OF WEB BROWSING LAYOUT ENGINE EVALUATION IN DEVELOPMENT

ROLE OF WEB BROWSING LAYOUT ENGINE EVALUATION IN DEVELOPMENT INFORMATION AND COMMUNICATION TECHNOLOGIES ROLE OF WEB BROWSING LAYOUT ENGINE EVALUATION IN DEVELOPMENT PROCESS OF MORE USABLE WEB INFORMATION SYSTEM Gatis Vitols, Latvia University of Agriculture gatis.vitols@llu.lv;

More information

HTML Markup for Accessibility You Never Knew About

HTML Markup for Accessibility You Never Knew About HTML Markup for Accessibility You Never Knew About David Epler dcepler@dcepler.net June 27, 2004 HTML Revisions HTML 2.0 November 1995 Base version everyone learned HTML 3.2 January 1997 Tried to reconcile

More information

Module 2 (VII): CSS [Part 4]

Module 2 (VII): CSS [Part 4] INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals

More information

Certified HTML5 Developer VS-1029

Certified HTML5 Developer VS-1029 VS-1029 Certified HTML5 Developer Certification Code VS-1029 HTML5 Developer Certification enables candidates to develop websites and web based applications which are having an increased demand in the

More information

COPYRIGHTED MATERIAL. Contents. Introduction. Chapter 1: Structuring Documents for the Web 1

COPYRIGHTED MATERIAL. Contents. Introduction. Chapter 1: Structuring Documents for the Web 1 Introduction Chapter 1: Structuring Documents for the Web 1 A Web of Structured Documents 1 Introducing HTML and XHTML 2 Tags and Elements 4 Separating Heads from Bodies 5 Attributes Tell Us About Elements

More information

Programmazione Web a.a. 2017/2018 HTML5

Programmazione Web a.a. 2017/2018 HTML5 Programmazione Web a.a. 2017/2018 HTML5 PhD Ing.Antonino Raucea antonino.raucea@dieei.unict.it 1 Introduzione HTML HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text

More information

Inline Elements Karl Kasischke WCC INP 150 Winter

Inline Elements Karl Kasischke WCC INP 150 Winter Inline Elements 2009 Karl Kasischke WCC INP 150 Winter 2009 1 Inline Elements Emphasizing Text Increasing / Decreasing Text Size Quotes and Citations Code, Variables, and Sample Output Spanning Text Subscripts

More information

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:

More information

Designing UI. Mine mine-cetinkaya-rundel

Designing UI. Mine mine-cetinkaya-rundel Designing UI Mine Çetinkaya-Rundel @minebocek mine-cetinkaya-rundel mine@stat.duke.edu - Web application UI is ultimately HTML/CSS/JavaScript - Let R users write user interfaces using a simple, familiar-looking

More information

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar.

GIMP WEB 2.0 MENUS. Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. GIMP WEB 2.0 MENUS Before we begin this tutorial let s visually compare a standard navigation bar and a web 2.0 navigation bar. Standard Navigation Bar Web 2.0 Navigation Bar Now the all-important question

More information

Introduction to HTML5

Introduction to HTML5 Introduction to HTML5 History of HTML 1991 HTML first published 1995 1997 1999 2000 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 After HTML 4.01 was released, focus shifted to XHTML and its stricter standards.

More information

Canvas & Brush Reference. Source: stock.xchng, Maarten Uilenbroek

Canvas & Brush Reference. Source: stock.xchng, Maarten Uilenbroek Canvas & Brush Reference Source: stock.xchng, Maarten Uilenbroek Canvas Hierarchy WACanvas WAHtmlCanvas WARenderCanvas WAStaticHtmlCanvas Brush Hierarchy WABrush WACompound WADateInput WATimeInput WATagBrush

More information

Cascading Style Sheet

Cascading Style Sheet Extra notes - Markup Languages Dr Nick Hayward CSS - Basics A brief introduction to the basics of CSS. Contents Intro CSS syntax rulesets comments display Display and elements inline block-level CSS selectors

More information

HTML. HTML is now very well standardized, but sites are still not getting it right. HTML tags adaptation

HTML. HTML is now very well standardized, but sites are still not getting it right. HTML tags adaptation 1 HTML HTML is now very well standardized, but sites are still not getting it right HTML tags adaptation HTML 2 HTML = HyperText Markup Language is used for the structural part of web pages Our strategy

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?

More information

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever

More information

Creating a Job Aid using HTML and CSS

Creating a Job Aid using HTML and CSS Creating a Job Aid using HTML and CSS In this tutorial we will apply what we have learned about HTML and CSS. We will create a web page containing a job aid about how to buy from a vending machine. Optionally,

More information

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading

More information

5-Sep-16 Copyright 2016 by GemTalk Systems LLC 1

5-Sep-16 Copyright 2016 by GemTalk Systems LLC 1 So far we have identified the specific Seaside messages to create particular HTML constructs in an adhoc manner as needed for particular features. Now we will attempt a more systematic approach by looking

More information

Web Publishing Basics I

Web Publishing Basics I Web Publishing Basics I Jeff Pankin Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What is HTML?... 3 What are the basic

More information

Web Publishing Intermediate 2

Web Publishing Intermediate 2 Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div

More information

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation 344 345 Text in Graphics Maximum flexibility obtained by treating text as graphics and manipulating

More information

<page> 1 Document Summary Document Information <page> 2 Document Structure Text Formatting <page> 3 Links Images <page> 4

<page> 1 Document Summary Document Information <page> 2 Document Structure Text Formatting <page> 3 Links Images <page> 4 Document Summary Document Information Document Structure Text Formatting Links Images Lists Forms Input Type Attributes Select Attributes Option Attributes Table Formatting Objects and iframes iframe Attributes

More information

Static Webpage Development

Static Webpage Development Dear Student, Based upon your enquiry we are pleased to send you the course curriculum for PHP Given below is the brief description for the course you are looking for: - Static Webpage Development Introduction

More information

HTML and CSS COURSE SYLLABUS

HTML and CSS COURSE SYLLABUS HTML and CSS COURSE SYLLABUS Overview: HTML and CSS go hand in hand for developing flexible, attractively and user friendly websites. HTML (Hyper Text Markup Language) is used to show content on the page

More information

CMPT 165 Advanced XHTML & CSS Part 3

CMPT 165 Advanced XHTML & CSS Part 3 CMPT 165 Advanced XHTML & CSS Part 3 Oct 15 th, 2015 Today s Agenda Quick Recap of last week: Tree diagram Contextual selectors CSS: Inheritance & Specificity Review 1 exam question Q/A for Assignment

More information

Web Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank

Web Development & Design Foundations with HTML5 & CSS3 Instructor Materials Chapter 2 Test Bank Multiple Choice. Choose the best answer. 1. What tag pair is used to create a new paragraph? a. b. c. d. 2. What tag pair

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

XHTML & CSS CASCADING STYLE SHEETS

XHTML & CSS CASCADING STYLE SHEETS CASCADING STYLE SHEETS What is XHTML? XHTML stands for Extensible Hypertext Markup Language XHTML is aimed to replace HTML XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

CS134 Web Site Design & Development. Quiz1

CS134 Web Site Design & Development. Quiz1 CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? a. www.whitehouse.gov

More information

Title: Dec 11 3:40 PM (1 of 11)

Title: Dec 11 3:40 PM (1 of 11) ... basic iframe body {color: brown; font family: "Times New Roman"} this is a test of using iframe Here I have set up two iframes next to each

More information

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial

More information

Style-Guidelines. Release 0.1

Style-Guidelines. Release 0.1 Style-Guidelines Release 0.1 Oct 31, 2017 Contents 1 Guidelines 3 i ii Author lxneng (Eric Lo) Version 1.0 Contents 1 2 Contents CHAPTER 1 Guidelines Python Code Style GuideLine PEP 8 : 4 : : 79,., =

More information

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST

GIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple

More information

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 2 Key Concepts Web Development & Design Foundations with XHTML Chapter 2 Key Concepts Learning Outcomes In this chapter, you will learn about: XHTML syntax, tags, and document type definitions The anatomy of a web page

More information

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar

Review of HTML. Chapter Pearson. Fundamentals of Web Development. Randy Connolly and Ricardo Hoar Review of HTML Chapter 3 Fundamentals of Web Development 2017 Pearson Fundamentals of Web Development http://www.funwebdev.com - 2 nd Ed. What Is HTML and Where Did It Come from? HTML HTML is defined as

More information

Advanced Web Programming C2. Basic Web Technologies

Advanced Web Programming C2. Basic Web Technologies Politehnica University of Timisoara Advanced Web Programming C2. Basic Web Technologies 2013 UPT-AC Assoc.Prof.Dr. Dan Pescaru HTML Originally developed by Tim Berners-Lee in 1990 at CERN (Conseil Européen

More information

How the Internet Works

How the Internet Works How the Internet Works The Internet is a network of millions of computers. Every computer on the Internet is connected to every other computer on the Internet through Internet Service Providers (ISPs).

More information

Fundamentals: Client/Server

Fundamentals: Client/Server Announcements Class Web Site: http://www.cs.umd.edu/projects/passport/classes/summer2008/ You can find this link at the end of the main passport site http://www.cs.umd.edu/projects/passport/webpage/ E-mail

More information

HTML Cheat Sheet for Beginners

HTML Cheat Sheet for Beginners HTML Cheat Sheet for Beginners HTML Cheat Sheet for Beginners Trying to remember every HTML element is like trying to remember all of your personal information, credit card, bank account numbers and your

More information

Structure Bars. Tag Bar

Structure Bars. Tag Bar C H E A T S H E E T / / F L A R E 2 0 1 8 Structure Bars The XML Editor provides structure bars above and to the left of the content area in order to provide a visual display of the topic tags and structure.

More information

HTML CS 4640 Programming Languages for Web Applications

HTML CS 4640 Programming Languages for Web Applications HTML CS 4640 Programming Languages for Web Applications 1 Anatomy of (Basic) Website Your content + HTML + CSS = Your website structure presentation A website is a way to present your content to the world,

More information

Announcements. Paper due this Wednesday

Announcements. Paper due this Wednesday Announcements Paper due this Wednesday 1 Client and Server Client and server are two terms frequently used Client/Server Model Client/Server model when talking about software Client/Server model when talking

More information

Name Related Elements Type Default Depr. DTD Comment

Name Related Elements Type Default Depr. DTD Comment Legend: Deprecated, Loose DTD, Frameset DTD Name Related Elements Type Default Depr. DTD Comment abbr TD, TH %Text; accept-charset FORM %Charsets; accept FORM, INPUT %ContentTypes; abbreviation for header

More information

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc

Design Project. i385f Special Topics in Information Architecture Instructor: Don Turnbull. Elias Tzoc Design Project Site: News from Latin America Design Project i385f Special Topics in Information Architecture Instructor: Don Turnbull Elias Tzoc April 3, 2007 Design Project - 1 I. Planning [ Upper case:

More information

Web development using PHP & MySQL with HTML5, CSS, JavaScript

Web development using PHP & MySQL with HTML5, CSS, JavaScript Web development using PHP & MySQL with HTML5, CSS, JavaScript Static Webpage Development Introduction to web Browser Website Webpage Content of webpage Static vs dynamic webpage Technologies to create

More information

Electronic Books. Lecture 6 Ing. Miloslav Nič Ph.D. letní semestr BI-XML Miloslav Nič, 2011

Electronic Books. Lecture 6 Ing. Miloslav Nič Ph.D. letní semestr BI-XML Miloslav Nič, 2011 Electronic Books Lecture 6 Ing. Miloslav Nič Ph.D. letní semestr 2010-2011 BI-XML Miloslav Nič, 2011 Evropský sociální fond Praha & EU: Investujeme do vaší budoucnosti E-book Wikipedia: An electronic book

More information

HTML Overview formerly a Quick Review

HTML Overview formerly a Quick Review HTML Overview formerly a Quick Review Outline HTML into Emergence of DHTML HTML History Evolution of Web 1.0 to Web 2.0 DHTML = HTML + JavaScript + CSS Key Set of HTML Tags Basic: a, html, head, body,

More information

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx

More information

CS144 Notes: Web Standards

CS144 Notes: Web Standards CS144 Notes: Web Standards Basic interaction Example: http://www.youtube.com - Q: what is going on behind the scene? * Q: What entities are involved in this interaction? * Q: What is the role of each entity?

More information

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0

CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE CHAPTER 2 MARKUP LANGUAGES: XHTML 1.0 Modified by Ahmed Sallam Based on original slides by Jeffrey C. Jackson reserved. 0-13-185603-0 HTML HELLO WORLD! Document

More information

CIS 228 (Fall, 2012) Exam 2, 11/20/12

CIS 228 (Fall, 2012) Exam 2, 11/20/12 CIS 228 (Fall, 2012) Exam 2, 11/20/12 Name (sign) Name (print) email Question 1 2 3 4 5 6 7 8 9 10 TOTAL Score CIS 228, exam 2 1 11/20/12 True or false: Question 1 Unordered lists can contain ordered sub-lists.

More information

Create a cool image gallery using CSS visibility and positioning property

Create a cool image gallery using CSS visibility and positioning property GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide

More information

HTML. HTML Evolution

HTML. HTML Evolution Overview stands for HyperText Markup Language. Structured text with explicit markup denoted within < and > delimiters. Not what-you-see-is-what-you-get (WYSIWYG) like MS word. Similar to other text markup

More information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, Style Sheets, the Box Model and Liquid Layout Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of

More information

Brief Intro to HTML. CITS3403 Agile Web Development. 2018, Semester 1

Brief Intro to HTML. CITS3403 Agile Web Development. 2018, Semester 1 Brief Intro to HTML CITS3403 Agile Web Development 2018, Semester 1 Some material Copyright 2013 Pearson Education, Inc. Publishing as Pearson Addison-Wesley. Origins and Evolutions of HTML HTML was defined

More information

Dreamweaver: Portfolio Site

Dreamweaver: Portfolio Site Dreamweaver: Portfolio Site Part 3 - Dreamweaver: Developing the Portfolio Site (L043) Create a new Site in Dreamweaver: Site > New Site (name the site something like: Portfolio, or Portfolio_c7) Go to

More information

A designers guide to creating & editing templates in EzPz

A designers guide to creating & editing templates in EzPz A designers guide to creating & editing templates in EzPz Introduction...2 Getting started...2 Actions...2 File Upload...3 Tokens...3 Menu...3 Head Tokens...4 CSS and JavaScript included files...4 Page

More information

Chapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure?

Chapter 1 Self Test. LATIHAN BAB 1. tjetjeprb{at}gmail{dot}com. webdesign/favorites.html :// / / / that houses that information. structure? LATIHAN BAB 1 Chapter 1 Self Test 1. What is a web browser? 2. What does HTML stand for? 3. Identify the various parts of the following URL: http://www.mcgrawhill.com/books/ webdesign/favorites.html ://

More information

Using CSS for page layout

Using CSS for page layout Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility

More information

Programming of web-based systems Introduction to HTML5

Programming of web-based systems Introduction to HTML5 Programming of web-based systems Introduction to HTML5 Agenda 1. HTML5 as XML 2. Basic body elements 3. Text formatting and blocks 4. Tables 5. File paths 6. Head elements 7. Layout elements 8. Entities

More information

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML HTML is a markup language for describing web pages HTML is used

More information

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations Hun Myoung Park (2/2/2018) Layout & Position: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations DCC5382 (2 Credits) Introduction

More information

Table-Based Web Pages

Table-Based Web Pages Table-Based Web Pages Web Authoring and Design Benjamin Kenwright Outline What do we mean by Table-Based Web Sites? Review Table Tags/Structure Tips/Debugging/Applications Summary Review/Discussion Submissions/Quizzes/GitHub

More information

CS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017

CS197WP. Intro to Web Programming. Nicolas Scarrci - February 13, 2017 CS197WP Intro to Web Programming Nicolas Scarrci - February 13, 2017 Additive Styles li { color: red; }.important { font-size: 2em; } first Item Second

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

Dreamweaver CS3 Lab 2

Dreamweaver CS3 Lab 2 Dreamweaver CS3 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

HTMLnotesS15.notebook. January 25, 2015

HTMLnotesS15.notebook. January 25, 2015 The link to another page is done with the

More information

HTML+ CSS PRINCIPLES. Getting started with web design the right way

HTML+ CSS PRINCIPLES. Getting started with web design the right way HTML+ CSS PRINCIPLES Getting started with web design the right way HTML : a brief history ❶ 1960s : ARPANET is developed... It is the first packet-switching network using TCP/IP protocol and is a precursor

More information

Creating Layouts Using CSS. Lesson 9

Creating Layouts Using CSS. Lesson 9 Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

Web Development and Design Foundations with HTML5 8th Edition

Web Development and Design Foundations with HTML5 8th Edition Web Development and Design Foundations with HTML5 8th Edition Felke-Morris TEST BANK Full clear download (no formatting errors) at: Web Development and Design Foundations with HTML5 8th Edition Felke-Morris

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Creating and Building Websites

Creating and Building Websites Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda

More information

Website Development with HTML5, CSS and Bootstrap

Website Development with HTML5, CSS and Bootstrap Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on

More information

HTML HTML5. DOM(Document Object Model) CSS CSS

HTML HTML5. DOM(Document Object Model) CSS CSS HTML HTML5 DOM(Document Object Model) CSS CSS HTML html img jpg png gif jpg png gif

More information