introduction to html and cssmathys/ecen1200/internet/htmlcssintro2… · cascading style sheets...
TRANSCRIPT
![Page 1: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/1.jpg)
Introduction to HTML and CSS
ECEN 1200Telecommunications 1
What is HTML?
HTML stands for hyper-text markup language.HTML is intended to be a language that can be used to describe the logical structure of documents and the relationships between documents stored in different locations.HTML documents may contain text, images, links, and additional multimedia content and programming scripts.
![Page 2: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/2.jpg)
Is HTML Complicated?
Well, It Depends On…
![Page 3: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/3.jpg)
Well, It Depends On…
What you want to achieve in terms ofContentLayoutInteractivityReusability, document engineering
But also on how dependent the software developers want to make you of their programs ;-).
Overall Structure
Tags to denote an HTML document and split it into HEAD and BODY parts are:
<html>, <head>, <body>The corresponding end tags are:
</html>, </head>, </body>The HEAD is used for indexing and classification. Only the BODY part shows in the main browser window.
![Page 4: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/4.jpg)
Structural Tags
<h1>text</h1>, … <h6>text</h6> for headings of size 1…6 (1 is largest)<p>text</p> for paragraphs<div>text</div> for (sub)division<em>text</em> for emphasis<strong>text</strong> for strong emphasis<blockquote>text</blockquote> for quotations from other works
Presentation Tags
<b>text</b> for bold face<i>text</i> for italic style<u>text</u> for underline<tt>text</tt> for monospace font<sub>text</sub> for subscript<sup>text</sup> for superscript<center>text</center> to center text<br> for line break<hr> for horizontal rule
![Page 5: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/5.jpg)
Tags for Links
<a>text</a> for anchor<a href=“http://www.google.com”><a href=“index.html”><a href=“rec.html#sec04”><a name=“sec04”>
List Tags
<ul>items</ul> for unordered list<ol>items</ol> for ordered list<li>text</li> for list item, e.g.,<ul><li>www.google.com</li><li>www.yahoo.com</li><li>www.msn.com</li>
</ul>
![Page 6: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/6.jpg)
HTML Skeleton
Simple HTML Page
![Page 7: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/7.jpg)
HTML Page in Browser
Comments in HTML
![Page 8: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/8.jpg)
HTML Page Appearance
New Look in Browser
![Page 9: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/9.jpg)
Cascading Style Sheets
HTML was conceived as a language to describe the logical structure of documents and not their appearance.As the WWW became more popular and commercial, people started to “abuse” HTML tags to control the appearance of documents.Cascading Style Sheets (CSS) were introduced as a specific mechanism to control the appearance of web pages.
Adding Style
Styles can be added to a page in various ways:
As style attribute, e.g., for red text<span style=“color:red;”>text</span>As style declaration in <head> section:<head><style>body{color:red;}</style></head>
In an external style sheet, e.g, mystyle.css<link rel=“stylesheet” type=“text/css”href=“mystyle.css”>
![Page 10: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/10.jpg)
Syntax for Styles
The basic syntax for a style is:Selector { property: value; }
Example:body { color: orange;background: black;}
Selector can be HTML tag, or a custom selector of type CLASS or ID.
Properties
Examples of properties are:backgroundmarginpaddingborderfontheight, widthposition
![Page 11: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/11.jpg)
CSS for Appearance
Appearance in Browser
![Page 12: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/12.jpg)
How is Page Rendered?
Block-Level/Inline Structure Made Visible
![Page 13: Introduction to HTML and CSSmathys/ecen1200/internet/HtmlCssIntro2… · Cascading Style Sheets HTML was conceived as a language to describe the logical structure of documents and](https://reader034.vdocuments.us/reader034/viewer/2022042711/5f6f24b07673576dfa5d7736/html5/thumbnails/13.jpg)
CSS1 and HTML Code
Block-Level and Inline Elements
HTML elements are subdivided into block-leveland inline (or text-level) elements Block level elements (e.g., <h1>, <p>)
Are “larger than inline elements” and may contain inline and other block-level elementsGenerally begin on new lines
Inline elements (e.g., <span>, <b>)Can contain other inline but not block-level elementsDo not begin on new lines