Project Pertemuan 13 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.

Slides:



Advertisements
Similar presentations
Session 2 Introduction to HyperText Markup Language 4 (HTML 4) Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
Advertisements

Chapter 3 – Web Design Tables & Page Layout
HTML popo.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
HTML: HyperText Markup Language Hello World Welcome to the world!
Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.
INTRODUCTION TO HYPERTEXT MARKUP LANGUAGE 1. Outline  Introduction  Markup Languages  Editing HTML  Common Tags  Headers  Text Styling  Linking.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Hyperlink & Form Pertemuan 11 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Chapter 4 Marking Up With Html: A Hypertext Markup Language Primer.
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
1 HTML Markup language – coded text is converted into formatted text by a web browser. Big chart on pg. 16—39. Tags usually come in pairs like – data Some.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
CSS Pertemuan 12 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Introduction to Web & HTML Pertemuan 08 Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
XHTML and CSS Overview. Hypertext Markup Language A set of markup tags and associated syntax rules Unlike a programming language, you cannot describe.
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
HTML. Goals How to use the Komodo editor HTML coding and testing Basic HTML tags List and Images Tables and Links At least 2 pages and navigation
Week 1 8/10/2015iSTTS, Agenda Introduction to HTML Creating and publishing a Web page Validating a document Main HTML elements Block-level HTML.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
CS105 Introduction to Computer Concepts HTML
© 2012 Adobe Systems Incorporated. All Rights Reserved. LEARNING THE LANGUAGE OF THE WEB INTRODUCTION TO HTML AND CSS.
Chapter 4 Fluency with Information Technology L. Snyder Marking Up With HTML: A Hypertext Markup Language Primer.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
_ HTML, XHTML & CSS Sami Niemelä | Module 1: Introduction to digital media: Day 02.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Dr. Nuha El-KhaliliInternet Programming ( ) HTML Hyper Text Markup Language The language of web pages Maintained by the W3C
Understanding HTML Code
 HTML stands for Hyper Text Mark-up Language. The coding language used to create documents for the World Wide Web  HTML is composed of tags. HTML tags.
HTML history, Tags, Element. HTML: HyperText Markup Language Hello World Welcome to the world!
HTML. Basic HTML HTML document – HTML headings – to HTML paragraphs – HTML links – HTML images –
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
1 eVenzia Technologies Learning HTML, XHTML & CSS Chapter 2.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
CS105 INTRODUCTION TO COMPUTER CONCEPTS HTML Instructor: Cuong (Charlie) Pham.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
Ali Alshowaish. What is HTML? HTML stands for Hyper Text Markup Language Specifically created to make World Wide Web pages Web authoring software language.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
CSE 409 – Advanced Internet Technology 1 DISCUSSION OF BASIC HTML TAGS.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
Introduction to Web Session 01 Subject: L0182 / Web & Animation Design Year: 2009.
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
WEEK -1 ACM 262 ACM 262 Course Notes. HTML What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
HTML. INDEX Introduction to HTML Creating Web Pages Commands And Tags Web Page.
1 HTML. 2 Full forms WWW – world Wide Web HTTP – Hyper Text Transfer Protocol HTML – Hyper Text Markup Language.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
HTML AN INTRODUCTION TO WEB PAGE PROGRAMMING. INTRODUCTION TO HTML With HTML you can create your own Web site. HTML stands for Hyper Text Markup Language.
HTML Basics.
Table Pertemuan 10 Matakuliah : L0182 / Web & Animation Design
HTML (HyperText Markup Language)
Project.
CSS Cascading Style Sheets
Matakuliah : Web Design
Computers and Scientific Thinking David Reed, Creighton University
Pertemuan 1b
Presentation transcript:

Project Pertemuan 13 Matakuliah: L0182 / Web & Animation Design Tahun: 2008

Bina Nusantara Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat dan mempresentasikan web yang sudah dibuat sesuai dengan prinsip-prinsip yang telah diajarkan

Bina Nusantara Outline Materi Eight Golden Rules Top Ten Mistakes in Web Design HTML Text Formatting Tags HTML Images Table Hyperlink CSS Formatting Text with Styles Layout with Styles

Bina Nusantara Eight Golden Rules Ben Shneiderman's "Eight Golden Rules of Interface Design" : –Strive for consistency –Enable frequent users to use shortcuts –Offer informative feedback –Design dialog to yield closure –Offer simple error handling –Permit easy reversal of actions –Support internal locus of control –Reduce short-term memory load

Bina Nusantara Top Ten Mistakes in Web Design Jakob Nielsen's Top Ten Mistakes in Web Design : –Using Frames –Gratuitous Use of Bleeding-Edge Technology –Scrolling Text, Marquees, and Constantly Running Animations –Complex URLs –Orphan Pages –Long Scrolling Pages –Lack of Navigation Support –Non-Standard Link Colors –Outdated Information –Overly Long Download Times

Bina Nusantara HTML HyperText Markup Language (HTML) is a markup language used to structure text and multimedia documents and to set up hypertext links between documents, used extensively on the World Wide Web. Basic HTML Tags : TagDescription Defines an HTML document Defines the document's body to Defines header 1 to header 6 Defines a paragraph Inserts a single line break Defines a horizontal rule Defines a comment

Bina Nusantara Text Formatting Tags TagDescription Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text Defines superscripted text

Bina Nusantara HTML Images In HTML, images are defined with the tag. To display an image on a page, you need to use the src attribute. The value of the src attribute is the URL of the image you want to display on your page. The “alt” attribute is used to define an "alternate text" for an image. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images.

Bina Nusantara Table Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Bina Nusantara Hyperlink HTML uses the (anchor) tag to create a link to another document. An anchor can point to any resource on the Web : an HTML page, an image, a sound file, a movie, etc. The tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

Bina Nusantara CSS –Example :  Body element will be displayed in black text color  If the value is multiple words, put quotes around the value  If you wish to specify more than one property, you must separate each property with a semicolon.  You can group selectors. All header elements will be displayed in green text color

Bina Nusantara Formatting Text with Styles PropertyDescription font-family: familynameTo set the font family font-style: italic/oblique/normalTo create italics/oblique/normal text font-weight: bold/normalTo apply bold/normal formatting font-size: sizept, e.g., 12ptTo set the font size line-height: sizept, e.g., 12ptTo set the line height color: #rrggbbTo set the text color background: #rrggbbTo set the text background text-align: left/right/center/justifyTo align text text-decoration: underline/overline/line- through/blink/none To underline/overline/line- through/blink text

Bina Nusantara Layout with Styles PropertyDescription height: size, e.g., 200Setting the element’s height width: size, e.g., 200Setting the element’s width border-top/bottom/left/right: thin/medium/thick or sizepx Setting the border padding-top/bottom/left/right: size, e.g., 10 Adding padding around the element margin-top/bottom/left/right: size, e.g., 10 Setting the margins around an element Vertical-align: baseline/middle/sub/super/text- top/text-bottom/top/bottom Aligning elements vertically