Prepare for your exams
Get points
Guidelines and tips
Sell on Docsity
Docsity AI

Prepare for your exams

Study with the several resources on Docsity

Earn points to download

Earn points by helping other students or get them with a premium plan

Guidelines and tips

Sell on Docsity

Docsity AI

Prepare for your exams

Study with the several resources on Docsity

Find documents

Prepare for your exams with the study notes shared by other students like you on Docsity

Search for your university

Find the specific documents for your university's exams

Docsity AINEW

Summarize your documents, ask them questions, convert them into quizzes and concept maps

Explore questions

Clear up your doubts by reading the answers to questions asked by your fellow students

Earn points to download

Earn points by helping other students or get them with a premium plan

Share documents

20 Points

For each uploaded document

Answer questions

5 Points

For each given answer (max 1 per day)

All the ways to get free points

Get points immediately

Choose a premium plan with all the points you need

Study Opportunities

Choose your next study program

Get in touch with the best universities in the world. Search through thousands of universities and official partners

Community

Ask the community

Ask the community for help and clear up your study doubts

Free resources

Our save-the-student-ebooks!

Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors

HTML and CSS Basics: Tags, Structure, and Styling - Prof. Nelson Padua-Perez, Study notes of Computer Science

University of Maryland Computer Science

Prof. Nelson Padua-Perez

An overview of html and css basics, including tags, structure, and styling. It covers topics such as heading tags, paragraph tags, code tags, emphasis, super/sub script, quotations, line breaks, verbatim text, unordered and ordered lists, nested lists, images, links, tables, special characters, comparison, and validation. It also discusses the importance of using a text editor, html editors, and authoring tools, as well as the recommended editor, komodo edit.

Typology: Study notes

Pre 2010

Uploaded on 02/13/2009

koofers-user-6va-1 🇺🇸

10 documents

1 / 18

This page cannot be seen from the preview

Don't miss anything!

Nested tags are possible but don’t overlap sets of them. Avoid the

following:

<em><strong>Message</em></strong>

Browser Processing

Multiple spaces are converted to one space.

John Mary Peter

Line returns are ignored.

Comments

Represented by  Note: (two sets of double -)

Examples



Comments can not be nested.

Discover Study notes of Computer Science University of Maryland

Partial preview of the text

Download HTML and CSS Basics: Tags, Structure, and Styling - Prof. Nelson Padua-Perez and more Study notes Computer Science in PDF only on Docsity!

 Nested tags are possible but don’t overlap sets of them. Avoid the following: Message

 Browser Processing  Multiple spaces are converted to one space. John Mary Peter John Mary Peter  Line returns are ignored.  Comments  Represented by Note: (two sets of double -)  Examples   Comments can not be nested.

 Text Editor  Any text editor (e.g., wordpad, notepad, pico, etc.)  HTML Editors  Utilities designed to write HTML  Examples: CoffeeCup HTML Editor, HTMLjive  Authoring tools  Frontpage  Dreamweaver – Fairly complex.  NVU – Free and available for (Windows, Linux, Mac) http://www.nvu.com/  List of editors can be found at: http://dir.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/HTML_Editors/  Recommended:  Komodo Edit http://www.activestate.com/Products/komodo_edit

 Emphasis

 text here Text usually rendered in italics  text here Text usually rendered in bold

 Super/Sub script

 text here  text here

 Quotations

 quote here

 Line Breaks



 Verbatim (text displayed exactly as it appears)

 text here

 Example: HtmlDoc.html

 Unordered lists  tags to represent beginning and end.  to represent elements in the list.  Example: Lists.html  Ordered lists  tags to mark beginning and end.  to represent elements in the list.  Definition lists  Consist of terms and definitions like in a glossary.  Tags -
 Terms specified using and definitions with
 Example: Lists.html  Nested lists

 Link – connection between web resources.

 Hypertext links are created using the (anchor) tag.

 The link can be text :

 CNN Web Page

 Notice that you need to specify the protocol (http://)

 Example: Links.html

 The URL can be absolute or relative.

 The link can be an image:

 To define a table we use the tag

 Border attribute controls table’s border.

 By default borders are not visible.

 Basic tags are associated with tables

 - defines a row.

 - defines a data element.

 - define a header data element.

 - provides a caption for the table.

 Must appear after the tag.  Must be used only once.

 Example: Tables.html

 Comparison

 Block elements begin on new lines whereas inline elements don’t.  Block elements create larger structures (allow you to define the large structure of your document) whereas inline elements don’t.

 Block Elements Examples

Paragraphs (

), Headings, Lists, Tables, Division (

), Block Quotations, Preformatted Text ()

 Inline Element Examples Anchors (), Images (), Line Breaks (
)

 Block elements may contain other block elements, inline elements, and data. Some block elements may not contain other block elements.

 Inline elements may contain inline elements and data.

 Why the following example does not validate?

 should be in a block element (e.g.,
)

 Example: validationProblem.html

 http://pages.google.com/

 You need a gmail account.

 Provides free hosting.

 Your address will be:

 http://YOURGMAILID.googlepages.com

 Official W3C standard for controlling presentation

 Specification: http://www.w3.org/TR/CSS21/

 Style Sheets

 Text file with rules. It includes no html.  Style sheets files use a .css extension.  Allows you to apply typographic styles (font size, line spacing, etc.)  Allows you to apply spacing instructions.  Allows you to have page layout control.  Smaller html files by avoiding redundancy in style specification.  Easy update a collection of pages by updating only a single file.  Example: ExternalFile.css

HTML and CSS Basics: Tags, Structure, and Styling - Prof. Nelson Padua-Perez, Study notes of Computer Science

Related documents

Partial preview of the text

Download HTML and CSS Basics: Tags, Structure, and Styling - Prof. Nelson Padua-Perez and more Study notes Computer Science in PDF only on Docsity!

 Link – connection between web resources.

 Hypertext links are created using the (anchor) tag.

 The link can be text :

 CNN Web Page

 Notice that you need to specify the protocol (http://)

 Example: Links.html

 The URL can be absolute or relative.

 The link can be an image:

 To define a table we use the tag

 Border attribute controls table’s border.

 By default borders are not visible.

 Basic tags are associated with tables

 - defines a row.

 - defines a data element.

 - define a header data element.

 - provides a caption for the table.

 Example: Tables.html

 Why the following example does not validate?

 should be in a block element (e.g., )

 Example: validationProblem.html

 http://pages.google.com/

 You need a gmail account.

 Provides free hosting.

 Your address will be:

 http://YOURGMAILID.googlepages.com

 Official W3C standard for controlling presentation

 Specification: http://www.w3.org/TR/CSS21/

 Style Sheets

 Why CSS? http://www.csszengarden.com/

 http://jigsaw.w3.org/css-validator/

 Notice you have three choices

 by URI

 by File Upload

 by direct input

 You can specify colors using one of the following

predefined colors:

yellow, white, teal, silver, red, purple, orange, olive,

navy, maroon, lime, green, gray, fuchsia, blue, black,

aqua

 Source for colors

http://www.w3schools.com/html/html_colors.asp

 You can specify a color by indicating the red, green and

blue components. For example, all the following are

equivalent:

 red

 rgb(255,0,0)

 #ff

 should be in a block element (e.g.,
)