Transcript html
Мультимедиа технологиялари фанидан
мустакил иш
Client-side Web
HTML and CSS basics
Azizbek Kadirov,
Nukus branch of TUIT
Client-side
Client-side Information
Presentation
HTML (Hypertext Markup Language)
CSS (Cascading Style Sheets)
Basic HTML Syntax
• Tags: ‘<’ tag_name ‘>’
• Specify how the browser should display the
part of the document that is associated with
them
• Most tags appear in pairs
e.g., This is <b>important</b>.
Opening tag
Tag value
Closing tag
• A tag may have some attributes
e.g., This is a picture <img src=“pic1.jpg”/>.
• Comments: ‘<!--’ comment_text ‘-->’
HTML Document Structure
<html>
<head>
<title> … </title>
</head>
<body>
…
</body>
</html>
Head Part:
Information about
the document
Body Part: Content
of the document
HTML – Basic Text Formatting
• Paragraphs: <p> … </p>
• Line breaks: <br/>
• Headings – 6 levels
• Largest: <h1> … </h1>
• Smallest: <h6> … </h6>
• Blockquotes: <blockquote> … </blockquote>
• Font styles and sizes
• Bold: <b> … </b>, Italic: <i> .. </i>, underlined:
<u> … </u>
• Relative sizes: <big> … </big>, <small> ..
</small>
• Monospace font (e.g., Courier): <tt> … </tt>
• Horizontal rules: <hr/>
HTML – Text Formatting Example
<html>
<head><title>CS457</title></head>
<body>
<br/>
<h2>Web-based Software Development</h2>
<h3>Course Objective:</h3>
<p>In this course, students will learn
the core <i>concepts</i> and
<i>technologies</i> behind the <b>World
Wide Web (Web)</b>, and <i>practice</i> the
languages and tools to build <u>Web-based
contents and services</u>. </p>
<h3>Related Information</h3>
<h4>W3C</h4>
<blockquote>The World Wide Web
Consortium (W3C) develops interoperable
technologies to lead the Web to its full
potential.</blockquote>
<hr/>
<tt>Tashkent University of Information
Technologies</tt>
</body>
</html>
Cascading Style Sheets (CSS)
Provide a method of imposing consistency on the
style of Web pages
• Not part of HTML, but can be embedded in
HTML documents
• Can impose a standard style on a whole
document, or even a whole collection of
documents
• Most of the style attributes (e.g., color, align,
size, ...) in HTML are deprecated from HTML
4.0
• http://www.w3.org/Style/CSS/
CSS Example
<html>
<head>
<title>CS457</title>
<style type = "text/css">
<!-p { font-size: 16; color: blue;
background-color: yellow }
h2, h3 { font-size: 16; color: red }
-->
</style>
</head>
<body>
<br/>
<h2>Web-based Software Development</h2>
<h3>Course Objective:</h3>
<p>In this course, students will learn
the core <i>concepts</i> and
<i>technologies</i> behind the <b>World Wide
Web (Web)</b>, and <i>practice</i> the
languages and tools to build <u>Web-based
contents and services</u>. </p>
<h3>Related Information</h3>
<h4>W3C</h4>
</body>
</html>
CSS Levels
• CSS1 (1996, W3C)
– Inline styles – specified for a specific occurrence
of a tag and apply only to that tag
• CSS2 (1996)
– Document-level styles – applied to the whole
document in which they appear (in the HTML
head)
• CSS3 (1998)
– External styles – can be applied to any number
of documents
• When more than one style sheet applies to a
specific tag in a document, the lowest level style
sheet has precedence
CSS CSS1 (Inline)
• Style sheet appears as the value of the style
attribute
• • General form:
style = "property_1: value_1;
property_2: value_2;
…
property_n: value_n”
• Scope of an inline style sheet is the content of the
tag
• e.g., <p style = “font-size: 12pt; color: blue;
background-color: white”> … </p>
CSS2 (Document Level)
• Style sheet appears as a list of rules that are the
content of a <style> tag
– The <style> tag must include the type attribute, set to
"text/
css“
– The list of rules must be placed in an HTML comment,
because it is not HTML
– Comments in the rule list must have a different form – use
C
comments (/*…*/)
• General form:
<style type = "text/css">
<!-rule list
-->
</style>
CSS3 (External)
• Form is a list of style rules, as in the content of a
<style> tag for document-level style sheets
• Written as text files with the MIME type text/css
• A <link> tag is used to specify that the browser is
to fetch and use an external style sheet file
<link rel = stylesheet type = "text/css"
href =
"http://www.wherever.org/termpaper.css">
</link>
• External style sheets can be validated at
http://jigsaw.w3.org/css-validator/
Summary
• We use HTML tags for web-document logic
• We use CSS for styling web-documents
• There are three ways of including CSS styles
into documents
Thank you for
attention!