Web Publishing with HTML
|
|
- Amy Sparks
- 5 years ago
- Views:
Transcription
1 Web Publishing with HTML MSc Induction Tutorials Athena Eftychiou PhD Student Department of Computing 1
2 Objectives Provide a foundation on Web Publishing by introducing basic notations and techniques like HTML, CSS and XML. Revise the basic structure of an HTML document and find out how to apply simple formatting to a Web page. Revise XML, the reasons for using XML and basic XML structure. 2
3 Introduction View source!! 3
4 How the web works Client/Server architecture. Web page request 4
5 HTML Introduction to HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language It is a Markup Language, not a programming language A markup language is a syntax and/or set of rules to manage content and structure of a document or object ( A markup language is a set of markup tags HTML uses markup tags to describe web pages, usually called HTML tags 5
6 HTML Document HTML documents: describe web pages contain HTML tags and plain text Every HTML document comprises just a single outer element - the <html> element The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. 6
7 HTML Document Example: <html> <body> <h1>my First Heading</h1> <p>my first paragraph</p> </body> </html> Let s create our first HTML document!! Example explained: The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph 7
8 HTML Elements HTML documents are defined by HTML elements. All commands that specify the layout of the Web page are provided in the form of elements, or tags. HTML element syntax: HTML element starts with a start tag / opening tag. HTML element ends with an end tag / closing tag. The element content is everything between the start and the end tag. Some HTML elements have empty content. Most HTML elements can have attributes. 8
9 HTML Elements The following example contains three HTML elements <html> <body> <p align= justify > </p> </body> </html> Example Explained: The <p> element: This is my first paragraph<br /> This is a different line! defines a paragraph in the HTML document has a start tag <p> and an end tag </p> The element content is: This is my first paragraph <br/> This is a different line! 9
10 HTML Elements <html> <body> <p align= justify > </p> </body> </html> This is my first paragraph<br /> This is a different line! Example Explained: The <body> element: defines the body of the HTML document has a start tag <body> and an end tag </body> The element content is another HTML element (a paragraph) 10
11 HTML Elements <html> <body> <p align= justify > </p> </body> </html> This is my first paragraph<br /> This is a different line! Example Explained: The <html> element: defines the whole HTML document has a start tag <html> and an end tag </html> The element content is another HTML element (the body) 11
12 HTML Elements Don't forget the End Tag. The following example will work in most browsers, but forgetting the end tag can produce unexpected results or errors. <p>this is a paragraph Empty HTML Elements <br> is an empty element without a closing tag. Adding a slash to the start tag, like <br />, is the proper way of closing empty elements. HTML Tips Use Lowercase Tags. HTML tags are not case sensitive. BUT World Wide Web Consortium (W3C) recommends lowercase. 12
13 HTML Attributes HTML elements can have attributes. Attributes provide additional information about HTML elements. Attributes are always specified in the start tag. Attributes come in name/value pairs like: name="value. Attribute values should always be enclosed in quotes. Example: HTML links are defined with the <a> tag. The link address is provided as an attribute <a href=" is a link</a> 13
14 HTML Attributes Below is a list of some attributes that are standard for most HTML elements: Attribute Value Description class class_rule or style_rule The class of the element id id_name A unique id for the element style style_definition An inline style definition title tooltip_text A text to display in a tool tip Let s have a real example! 14
15 HTML Text Formatting HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags. Text Formatting Tags example list: Tag <b> <big> <em> <i> <small> <strong> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text 15
16 HTML Text Formatting Example <html> <body> <p><b>this text is bold</b></p> <p><big>this text is big</big></p> <p><em>this text is emphasized</em></p> <p><i>this text is italic</i></p> <p><small>this text is small</small></p> <p>this is<sub> subscript</sub> and <sup>superscript</sup></p> </body> </html> 16
17 HTML Text Formatting Example explained: <b>this text is bold</b> <big>this text is big</big> <i>this text is italic</i> <small>this text is small</small> This is<sub> subscript</sub> and <sup>superscript</sup> This text is bold This text is big This text is italic This text is small This is subscript and superscript 17
18 HTML Table Tables are defined with the <table> tag. A table is divided into rows with the <tr> tag. Each row is divided into data cells with the <td> tag. td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. 18
19 HTML Table Example <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Results: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 19
20 HTML Table Border attribute To display a table with borders, you will have to use the border attribute. <table border="1"> Headings in a Table Headings in a table are defined with the <th> tag <th>heading</th> Empty Cells in a Table Table cells with no content are not displayed very well in most browsers. Add a non-breaking space ( ) to empty data cells <td> </td> 20
21 HTML Table Example <table border="1"> <tr> <th>heading</th> <th>another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td> </td> </tr> </table> Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 Q: How can I add more columns in this table? 21
22 HTML Images In HTML, images are defined with the <img> tag. To display an image on a page, use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The URL points to the location where the image is stored. <img src="url" /> 22
23 HTML Images The Alt Attribute Used to define an "alternate text" for an image. Tells the reader what he or she is missing on a page if the browser can't load images. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document. <img src="boat.gif" alt="big Boat" /> Let s see an example! 23
24 HTML Links Hyperlinks A hyperlink is a reference (an address) to a resource on the web. A hyperlink can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a>, is used to define hyperlinks. <a href="url">link text</a> The element content doesn't have to be text. You can link from an image or any other HTML element. 24
25 HTML Links The href Attribute defines the link "address". The following example defines a link to W3Schools: <a href=" W3Schools!</a> The target Attribute defines where the linked document will be opened. The following example will open the document in a new browser window. <a href=" target="_blank">visit W3Schools!</a> Q: How can I create a link that refers to the UniS website, using an image instead of text? 25
26 HTML Links The name Attribute When the name attribute is used, the <a> element defines a named anchor inside a HTML document. The following is an example of a named anchor inside an HTML document: <a name="tips">useful Tips Section</a> A link to the Useful Tips Section from the same document: <a href="#tips"> Jump to the Useful Tips Section</a> A link to the Useful Tips Section from another document: <a href=" Jump to the Useful Tips Section</a> 26
27 HTML Forms and Input Forms A form is an area that can contain form elements. Form elements are elements that allow the user to enter information (like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.) in a form. A form is defined with the <form> tag. <form>. input elements. </form> 27
28 HTML Forms and Input Input The most used form tag is the <input> tag. The type of input is specified with the type attribute. The most commonly used input types are listed below. Text Fields Text fields are used when you want the user to type letters, numbers, etc. in a form. Radio Buttons Radio Buttons are used when you want the user to select one of a limited number of choices. Checkboxes Checkboxes are used when you want the user to select one or more options of a limited number of choices. 28
29 HTML Forms Other form elements textarea The <textarea> tag defines a multi-line text input control. The size of a textarea can be specified by the cols and rows attributes, or even better; through CSS' height and width properties. Required attributes: cols, rows (define the visible area) Optional attributes: readonly, disabled, name Example: <textarea rows="2" cols="20 > This text area can expand up to 2 rows and up to 20 columns </textarea> 29
30 HTML Forms Select list <select> tag is used to create a select list (drop-down list). The <option> tags inside the select element define the available options in the list. Example: <select> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="mercedes">mercedes</option> <option value="audi">audi</option> </select> 30
31 HTML Forms and Input Example <form> First name:<input type="text" name="firstname" /> <br /> Last name:<input type="text" name="lastname" /> <input type="radio" name="sex" value="male" /> Male <br /> <input type="radio" name="sex" value="female" /> Female I have a bike: <input type="checkbox" name="vehicle" value="bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="car" /> </form> Let s insert the textarea and select elements in the form of the above example. 31
32 HTML Divs The <div> tag defines a division or a section in an HTML document The <div> tag is often used to group block-elements to format them with styles. Example: <div style="color: green"> <h3>this is a header</h3> <p>this is a paragraph.</p> </div> Q: How can I define another division but with a different colour? 32
33 HTML Styles Formatting can be moved out of the HTML document and into a separate style sheet. Cascading Style Sheets (CSS) create and apply style rules to HTML documents. When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: External Style Sheet Internal Style Sheet Inline Styles 33
34 HTML Styles External Style Sheets Ideal when the style is applied to many pages. 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> 34
35 HTML Styles External Style Sheets The CSS syntax is made up of three parts: a selector, a property and a value selector {property:value} Example: h1 { } color : red; font-family : Arial Q: How can I define the font size for element h1? 35
36 HTML Styles Internal Style Sheet Should be used when a single document has a unique style. You define internal styles in the head section with the <style> tag. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Let s have an example. 36
37 HTML Styles Inline Styles Should be used when a unique style is to be applied to a single occurrence of an element. To use inline styles you use the style attribute in the relevant tag. <p style="color: red; margin-left: 20px"> This is a paragraph </p> Let s have an example. 37
38 Summary We have talked about HTML: HTML document HTML elements HTML attributes Text formatting HTML Tables, Links, Images HTML forms and input Stylesheets (CSS) Next XML 38
39 XML XML stands for EXtensible Markup Language. XML is a markup language much like HTML. XML tags are not predefined. You must define your own tags. XML is designed to be self-descriptive. 39
40 Differences between XML and HTML XML is not a replacement for HTML. XML and HTML were designed with different goals: XML was designed to transport and store data, with focus on what data is. HTML was designed to display data, with focus on how data looks. HTML is about displaying information, while XML is about carrying information. XML is a software- and hardware-independent tool for carrying information. 40
41 Why XML? XML Simplifies Data Sharing XML data is stored in plain text format. This provides a software- and hardware-independent way of storing data. This makes it much easier to create data that different applications can share. XML Simplifies Data Transport Data can easily be exchanged between incompatible systems. Data can be read by different incompatible applications. XML Simplifies Platform Changes XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data. 41
42 XML Structure XML documents form a tree structure that starts at "the root" and branches to "the leaves". XML documents must contain a root element. This element is "the parent" of all other elements. All elements can have sub elements (child elements). <root> <child> </root> </child> <subchild>...</subchild> 42
43 XML Elements With XML you invent your own tags. That is because the XML language has no predefined tags. XML allows the author to define his own tags and his own document structure. All XML elements must have a closing tag. <p>this is a paragraph without a closing tag XML tags are case sensitive. <Message>This is incorrect</message> <message>this is correct</message> XML Attribute Values Must be Quoted <note date="12/11/2007"> <to>tove</to> <from>jani</from> </note> 43
44 XML Example <?xml version="1.0" encoding="iso "?> <breakfast_menu> <food> <name>belgian Waffles</name> <price>$5.95</price> <description>two of our famous Belgian Waffles with plenty of real maple syrup</description> </food> <calories>650</calories> </breakfast_menu> 44
45 Summary We have talked about XML: What is XML Differences between XML and HTML Why to use XML XML structure XML elements 45
46 References W3Schools Tutorials World Wide Web Consortium (W3C) MSc Induction Tutorials 46
47 Questions 47
HTML. Asst. Prof. Dr. Kanda Runapongsa Saikaew Department of Computer Engineering Khon Kaen University
HTML Asst. Prof. Dr. Kanda Runapongsa Saikaew (krunapon@kku.ac.th) Department of Computer Engineering Khon Kaen University 1 What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file
More informationIslamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM Advanced Internet Technology Lab.
Islamic University of Gaza Faculty of Engineering Department of Computer Engineering ECOM 5049 Advanced Internet Technology Lab Lab # 1 Eng. Haneen El-masry February, 2015 Objective To be familiar with
More informationWeb Design 101. What is HTML? HTML Tags. Web Browsers. <!DOCTYPE html> <html> <body> <h1>my First Heading</h1> <p>my first paragraph.
What is HTML? Web Design 101 HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language à A markup language is a set of markup tags The tags describe
More informationHTML. Mohammed Alhessi M.Sc. Geomatics Engineering. Internet GIS Technologies كلية اآلداب - قسم الجغرافيا نظم المعلومات الجغرافية
HTML Mohammed Alhessi M.Sc. Geomatics Engineering Wednesday, February 18, 2015 Eng. Mohammed Alhessi 1 W3Schools Main Reference: http://www.w3schools.com/ 2 What is HTML? HTML is a markup language for
More informationWeb Technologies - by G. Sreenivasulu Handout - 1 UNIT - I
INTRODUCTION: UNIT - I HTML stands for Hyper Text Markup Language.HTML is a language for describing web pages.html is a language for describing web pages.html instructions divide the text of a document
More informationComp-206 : Introduction to Software Systems Lecture 22. Alexandre Denault Computer Science McGill University Fall 2006
HTTP and HTML Comp-206 : Introduction to Software Systems Lecture 22 Alexandre Denault Computer Science McGill University Fall 2006 15 / 55 Mercury Subversion Directory The URL for the class subversion
More informationProgrammazione 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 informationComp-206 : Introduction to Software Systems Lecture 23. Alexandre Denault Computer Science McGill University Fall 2006
HTML, CSS Comp-206 : Introduction to Software Systems Lecture 23 Alexandre Denault Computer Science McGill University Fall 2006 Course Evaluation - Mercury 22 / 53 41.5% Assignment 3 Artistic Bonus There
More informationINTRODUCTION TO WEB USING HTML What is HTML?
Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language
More informationWeb Designing HTML5 NOTES
Web Designing HTML5 NOTES HTML Introduction What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages
More informationHTML Code: Headings HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least
HTML Code: Headings HTML Headings Headings are defined with the to tags. defines the most important heading. defines the least important heading. Example heading
More informationCSS CSS how to display to solve a problem External Style Sheets CSS files CSS Syntax
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
More informationHTML Hyperlinks (Links)
WEB DESIGN HTML Hyperlinks (Links) The HTML tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the
More informationMarkup Language SGML: Standard Generalized Markup Language. HyperText Markup Language (HTML) extensible Markup Language (XML) TeX LaTeX
HTML 1 Markup Languages A Markup Language is a computer language in which data and instructions describing the structure and formatting of the data are embedded in the same file. The term derives from
More informationHTML. Based mostly on
HTML Based mostly on www.w3schools.com What is HTML? The standard markup language for creating Web pages HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup
More informationBy Ryan Stevenson. Guidebook #2 HTML
By Ryan Stevenson Guidebook #2 HTML Table of Contents 1. HTML Terminology & Links 2. HTML Image Tags 3. HTML Lists 4. Text Styling 5. Inline & Block Elements 6. HTML Tables 7. HTML Forms HTML Terminology
More informationWhat is CSS? NAME: INSERT OPENING GRAPHIC HERE:
What is CSS? NAME: INSERT OPENING GRAPHIC HERE: Highlight VOCABULARY WORDS that you need defined. Put a? mark in any area that you need clarified. 1 What is CSS? CSS stands for Cascading Style Sheets Styles
More informationHTML 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 informationCSC 121 Computers and Scientific Thinking
CSC 121 Computers and Scientific Thinking Fall 2005 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationHtml basics Course Outline
Html basics Course Outline Description Learn the essential skills you will need to create your web pages with HTML. Topics include: adding text any hyperlinks, images and backgrounds, lists, tables, and
More informationWith HTML you can create your own Web site. This tutorial teaches you everything about HTML.
CHAPTER ONE With HTML you can create your own Web site. This tutorial teaches you everything about HTML. Example Explained The DOCTYPE declaration defines the document type The text between and
More informationFall Semester 2016 (2016-1)
SWE 363: WEB ENGINEERING & DEVELOPMENT Fall Semester 2016 (2016-1) Overview of HTML Dr. Nasir Al-Darwish Computer Science Department King Fahd University of Petroleum and Minerals darwish@kfupm.edu.sa
More informationWeb Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen
https://www.halvorsen.blog Web Programming HTML CSS JavaScript Step by step Exercises Hans-Petter Halvorsen History of the Web Internet (1960s) World Wide Web - WWW (1991) First Web Browser - Netscape,
More informationThe internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data.
Review The internet is a worldwide collection of networks that link millions of computers. These links allow the computers to share and send data. It is not the internet! It is a service of the internet.
More informationHTML and DHTML. Content. User Interaction Client-Side. Building ASP.NET Web Pages. Introduction. Web Applications Development with
Content Introduction User Interaction Client-Side HTMLandDHTML DOM, Scripting Building Web Pages Web Controls, Themes and Master Pages State Management Techniques ADO.NET AJAX Validating Data Deploying
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationA 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 informationrecall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML)
HTML & Web Pages recall: a Web page is a text document that contains additional formatting information in the HyperText Markup Language (HTML) HTML specifies formatting within a page using tags in its
More information7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6. Phone: Toll Free: Fax:
HTML and CSS 7300 Warden Avenue, Suite 503 Markham, Ontario Canada L3R 9Z6 Phone: 905-479-3780 Toll Free: 877-479-3780 Fax: 905-479-1047 e-mail: info@andarsoftware.com Web: www.andarsoftware.com.com Copyright
More informationHTML Images - The <img> Tag and the Src Attribute
WEB DESIGN HTML Images - The Tag and the Src Attribute In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only, and has no closing tag.
More informationCHAPTER 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 informationITNP43: HTML Lecture 4
ITNP43: HTML Lecture 4 Niederst, Part III (3rd edn) 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and
More informationHTML BEGINNING TAGS. HTML Structure <html> <head> <title> </title> </head> <body> Web page content </body> </html>
HTML BEGINNING TAGS HTML Structure Web page content Structure tags: Tags used to give structure to the document.
More informationINFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS
INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html
More informationIntroduction to using HTML to design webpages
Introduction to using HTML to design webpages #HTML is the script that web pages are written in. It describes the content and structure of a web page so that a browser is able to interpret and render the
More informationWeb Engineering (Lecture 01)
Web Engineering (Lecture 01) By: Kamran Ullah Lecturer (CS) Class BS(CS)-5 th semester Web Engineering Definition 1: Web Engineering is the application of systematic and disciplined approaches to the design,
More informationIndex. 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 informationCOMPUTER APPLICATIONS IN BUSINESS FYBMS SEM II
CHAPTER 1: HTML 1. What is HTML? Define its structure. a. HTML [Hypertext Markup Language] is the main markup language for creating web pages and other information that can be displayed in a web browser.
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationProgramming 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 informationA Balanced Introduction to Computer Science, 3/E
A Balanced Introduction to Computer Science, 3/E David Reed, Creighton University 2011 Pearson Prentice Hall ISBN 978-0-13-216675-1 Chapter 2 HTML and Web Pages 1 HTML & Web Pages recall: a Web page is
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationHTML Text Formatting. HTML Session 2 2
HTML Session 2 HTML Text Formatting HTML also defines special elements for defining text with a special meaning. - Bold text - Important text - Italic text - Emphasized text
More informationE , Fall 2007 More with stylesheets
I hope that you ll appreciate my use of the waterfall both as a way to calm your frayed nerves and to provide you with a metaphor for the style sheets In this document, I d like to step back a little and
More informationOverview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS
CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?
More informationCSS how to display to solve a problem External Style Sheets CSS files
WEB DESIGN 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
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationCS 350 COMPUTER/HUMAN INTERACTION. Lecture 6
CS 350 COMPUTER/HUMAN INTERACTION Lecture 6 Setting up PPP webpage Log into lab Linux client or into csserver directly Webspace (www_home) should be set up Change directory for CS 350 assignments cp r
More informationHTML, CSS, JavaScript
HTML, CSS, JavaScript Encoding Information: There s more! Bits and bytes encode the information, but that s not all Tags encode format and some structure in word processors Tags encode format and some
More informationA Brief Introduction to HTML
A P P E N D I X HTML SuMMAry J A Brief Introduction to HTML A web page is written in a language called HTML (Hypertext Markup Language). Like Java code, HTML code is made up of text that follows certain
More informationHTML Form. Kanida Sinmai
HTML Form Kanida Sinmai ksinmai@tsu.ac.th http://mis.csit.sci.tsu.ac.th/kanida HTML Form HTML forms are used to collect user input. The element defines an HTML form: . form elements. Form
More informationIntroduction 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 informationSummary 4/5. (contains info about the html)
Summary Tag Info Version Attributes Comment 4/5
More informationChapter 1 Getting Started with HTML 5 1. Chapter 2 Introduction to New Elements in HTML 5 21
Table of Contents Chapter 1 Getting Started with HTML 5 1 Introduction to HTML 5... 2 New API... 2 New Structure... 3 New Markup Elements and Attributes... 3 New Form Elements and Attributes... 4 Geolocation...
More informationHTML 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 information2. Write style rules for how you d like certain elements to look.
CSS for presentation Cascading Style Sheet Orientation CSS Cascading Style Sheet is a language that allows the user to change the appearance or presentation of elements on the page: the size, style, and
More informationThe Benefits of CSS. Less work: Change look of the whole site with one edit
11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement
More informationIntroduction to Web Tech and Programming
Introduction to Web Tech and Programming Cascading Style Sheets Designed to facilitate separation of content and presentation from a document Allows easy modification of style for an entire page or an
More informationDesire2Learn: HTML Basics
Desire2Learn: HTML Basics Page 1 Table of Contents HTML Basics... 2 What is HTML?...2 HTML Tags...2 HTML Page Structure...2 Required Tags...3 Useful Tags...3 Block Quote - ...
More informationLAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI
LAB MANUAL SUBJECT: WEB TECHNOLOGY CLASS : T.E (COMPUTER) SEMESTER: VI INDEX No. Title Pag e No. 1 Implements Basic HTML Tags 3 2 Implementation Of Table Tag 4 3 Implementation Of FRAMES 5 4 Design A FORM
More informationHTML. Hypertext Markup Language. Code used to create web pages
Chapter 4 Web 135 HTML Hypertext Markup Language Code used to create web pages HTML Tags Two angle brackets For example: calhoun High Tells web browser ho to display page contents Enter with
More informationCSS: Cascading Style Sheets
CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS
More informationCSI 3140 WWW Structures, Techniques and Standards. Markup Languages: XHTML 1.0
CSI 3140 WWW Structures, Techniques and Standards Markup Languages: XHTML 1.0 HTML Hello World! Document Type Declaration Document Instance Guy-Vincent Jourdan :: CSI 3140 :: based on Jeffrey C. Jackson
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationCS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS
Goals CS 1100: Web Development: Client Side Coding / Fall 2016 Lab 2: More HTML and CSS Practice writing HTML Add links and images to your web pages Apply basic styles to your HTML This lab is based on
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationINTERNET PROGRAMMING XML
INTERNET PROGRAMMING XML Software Engineering Branch / 4 th Class Computer Engineering Department University of Technology OUTLINES XML Basic XML Advanced 2 HTML & CSS & JAVASCRIPT & XML DOCUMENTS HTML
More informationSpring 2014 Interim. HTML forms
HTML forms Forms are used very often when the user needs to provide information to the web server: Entering keywords in a search box Placing an order Subscribing to a mailing list Posting a comment Filling
More informationCITS1231 Web Technologies. Introduction to Cascading Style Sheets
CITS1231 Web Technologies Introduction to Cascading Style Sheets The Problems with HTML Poor Coding No consistency in the way a document is developed. The same markup can often be written a number of ways.
More informationChapter 7 Typography, Style Sheets, and Color. Mrs. Johnson
Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson Typography Typography refers to the arrangement, shape, size, style, and weight of text. Affects the navigation and usability of a web site and
More informationHyper Text Markup Language HTML: A Tutorial
Hyper Text Markup Language HTML: A Tutorial Ahmed Othman Eltahawey December 21, 2016 The World Wide Web (WWW) is an information space where documents and other web resources are located. Web is identified
More informationIntroduction to HTML
Introduction to HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML describes the structure of Web pages using markup HTML elements
More informationCSC309 Tutorial CSS & XHTML
CSC309 Tutorial CSS & XHTML Lei Jiang January 27, 2003 1 CSS CSC309 Tutorial --CSS & XHTML 2 Sampel XML Document
More informationReview Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>
Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.
More informationIMY 110 Theme 7 HTML Tables
IMY 110 Theme 7 HTML Tables 1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It
More informationSession 4. Style Sheets (CSS) Reading & References. A reference containing tables of CSS properties
Session 4 Style Sheets (CSS) 1 Reading Reading & References en.wikipedia.org/wiki/css Style Sheet Tutorials www.htmldog.com/guides/cssbeginner/ A reference containing tables of CSS properties web.simmons.edu/~grabiner/comm244/weekthree/css-basic-properties.html
More informationintroduction 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 informationStudy 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 informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationHyper Text Marimp Language (HTML)
Hyper Text Marimp Language (HTML) (ulorial referenced fi-cin li 11;): /Avwiv.w3.s.difl.ols.cam Section I What is HTML? HTML is the main and most popular riiiirlinp language for displaying web pages. What
More informationICT IGCSE Practical Revision Presentation Web Authoring
21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:
More informationLab Introduction to Cascading Style Sheets
Lab Introduction to Cascading Style Sheets For this laboratory you will need a basic text editor and a browser. In the labs, winedt or Notepad++ is recommended along with Firefox/Chrome For this activity,
More informationHTML (Hypertext Mark-up language) Basic Coding
HTML (Hypertext Mark-up language) Basic Coding What is HTML? HTML is a short term for hypertext mark-up language. HTML is used for website development. HTML works as the base structure and text format
More informationSkill Area 323: Design and Develop Website. Multimedia and Web Design (MWD)
Skill Area 323: Design and Develop Website Multimedia and Web Design (MWD) 323.4 Use graphics and objects on Web Page (7 hrs) 323.4.1 Insert foreground features 323.4.2 Modify image attributes 323.4.3
More informationText 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 informationIntroduction to HTML. SSE 3200 Web-based Services. Michigan Technological University Nilufer Onder
Introduction to HTML SSE 3200 Web-based Services Michigan Technological University Nilufer Onder What is HTML? Acronym for: HyperText Markup Language HyperText refers to text that can initiate jumps to
More information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
More informationWebsite 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 informationUNIT II Dynamic HTML and web designing
UNIT II Dynamic HTML and web designing 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 language A markup language
More informationCOMS 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 informationIntroduction to Computer Science (I1100) Internet. Chapter 7
Internet Chapter 7 606 HTML 607 HTML Hypertext Markup Language (HTML) is a language for creating web pages. A web page is made up of two parts: the head and the body. The head is the first part of a web
More informationSYBMM ADVANCED COMPUTERS QUESTION BANK 2013
CHAPTER 1: BASIC CONCEPTS OF WEB DESIGNING 1. What is the web? What are the three ways you can build a webpage? The World Wide Web (abbreviated as WWW or W3, commonly known as the web), is a system of
More informationDeccansoft 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 informationMotivation (WWW) Markup Languages (defined). 7/15/2012. CISC1600-SummerII2012-Raphael-lec2 1. Agenda
CISC 1600 Introduction to Multi-media Computing Agenda Email Address: Course Page: Class Hours: Summer Session II 2012 Instructor : J. Raphael raphael@sci.brooklyn.cuny.edu http://www.sci.brooklyn.cuny.edu/~raphael/cisc1600.html
More informationCOPYRIGHTED 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 informationo Line Breaks </body> </html> This is heading 1 This is some text. This is heading 2 This is some other text. This is heading 2
o Displaying lines of text: This paragraph contains a lot of lines in the source code, but the browser ignores it. This paragraph contains a lot of lines in the source code, but the browser ignores
More informationBridges To Computing
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited and encouraged to use this presentation to promote
More informationHTML Tags <A></A> <A HREF="http://www.cnn.com"> CNN </A> HREF
HTML Tags Tag Either HREF or NAME is mandatory Definition and Attributes The A tag is used for links and anchors. The tags go on either side of the link like this: the link
More information