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 the way e.g. an editor or a printer would "mark up" a text, with annotations in the body and margins of the document. It could be said that the mother of all markup languages was SGML: Standard Generalized Markup Language. This was developed at IBM during the 1970s and 1980s, and eventually became an ISO standard. Several types of markup used commonly derived from the ideas in SGML, including HyperText Markup Language (HTML) and extensible Markup Language (XML). Some other types of markup languages developed independently, such as TeX and LaTeX. 2
Hypertext Markup Language Hypertext Markup Language, better known as HTML, is the dominant format for the transfer of information across the Internet. It was the coupling of the idea for a browser with HTML that engendered the use of the term World Wide Web. Hypertext is simply a text that contains links to other texts. We deal with HTML in the form of documents/files that describe web pages. The file itself is just a plain text file containing tags that indicate formatting or other kinds of objects (e.g. images, tables, links, etc.) to insert. These files are sent across Internet or stored locally. When you open HTML document (either using some web address or just some file on your local machine) with a web browser, it processes plain text the document contains and displays a nice formatted web page so you can actually see all of the objects described by the plain file. Most of the browser allow user to see what raw HTML code which is currently displayed. HTML is a declarative language which means that you define how the result should like, but don t define which steps should be performed to achieve this result. This puts some restrictions on how much the result may be customized. In modern browsers this problem may be overcome with built-in JavaScript engines allowing to do additional manipulation with HTML. This makes possible to create dynamic Rich Web Applications which currently dominate on web. 3
Hypertext Markup Language Example: <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> <p>this is another paragraph</p> </body> </html> 4
Hypertext Markup Language HTML files follow just a few rules: 1. Every HTML command is enclosed in < and > characters: e.g. <p> 2. Basic HTML atoms are called "tags". Every opening tag must have a closing tag. Closing tags are the same as opening tags, except that the name of the tag is preceded by a slash: e.g. <p> has closing tag </p>. Opening and closing tags together may be referred as an HTML element. 3. The opening and closing tags enclose text whose format or content they specify. 4. If a tag does not enclose text, it can end itself: put a slash before the > character: e.g. <br/> 5. Tags must be nested (placed inside each other) properly: e.g. <b><i>bold italic text<i><b> is correct; <b><i>bold italic text<b><i> is not. 6. The behavior of HTML commands can be modified by inserting style specifications in the opening tag: e.g. <p style="text-align:center"> A Centered Paragraph <p> 7. HTML tags should be in lower case 5
Hypertext Markup Language Historically, HTML tags did not need to be closed, did not need to be nested properly, and it was even considered good style to write them in upper case letters. It is only with more recent updates to the language that these rules have become important. There are many tutorials available for HTML on the web - we list a few below. There is a tutorial at W3schools. You can find many more just by doing a web search for "HTML Tutorial". W3schools also provides a complete HTML tags reference here. There is no more authoritative source concerning HTML than the World Wide Web Consortium, which is an organization that defines the single HTML standard used by everyone. The latest version of HTML proposed by World Wide Web Consortium and supported by the most popular browser is HTML 5. 6
Tags Nesting <html> <head> <title>page Title</title> </head> <body> <h1>my First Heading</h1> <p>my first paragraph.</p> <p>this is another paragraph</p> </body> </html> 7
<html>, <head> and <body> tags <html> is a root tag for any HTML document, which means all contents of the document should be enclosed by this tag. <html> can have two child tags: <head> and <body>. <head> tag is mostly used to specify service information which is invisible to user, e.g. document metadata such as content type, encoding, document keywords, etc. An exception is a page title which should be defined in this section. Page title is usually displayed by browsers in window/tab title. Tag name used to define page title is simply <title>. <body> tag encloses the part of the document which is visible to user, so all the contents and description of its layout should be placed inside this tag. 8
Heading Tags Any document starts with a heading. You can use different sizes for your headings. HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before and one line after that heading. Example: <html> <body> <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> </body> </html> 9
Defining Structure: <div>, <p>, <table>, <ul>, <ol>, <dl>, <span> and <br/> tags The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group blockelements to format them with CSS. The <p> tag defines a paragraph. Browsers automatically add some space before and after each <p> element. An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. A table data/cell is defined with the <td> tag. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default. You can override this behavior using type attribute with one of the following options: 1 (default), A, a, I, i. HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term. Also the <span> element is often used as a container for some text. When used together with CSS, the <span> element can be used to style parts of the text. The key difference from all the above tags is that span doesn t create a new line. The <br/> tag inserts a single line break. The <br/> tag is an empty tag which means that it has no end tag. <tr>, <th>, <td>, <dt>, <dd> and <li> tags are examples of the tags that can only make sense as child elements of their specific parent tags and will have no effect outside these parent tags. <table> and <ul>, <ol>, <dl> are examples of the tags that can only make sense if some child elements are specified and shouldn t contain any content on the top level. 10
Formatting Text HTML defines special elements for defining text with a special meaning: <b> - Bold text <strong> - Important text <i> - Italic text <em> - Emphasized text <mark> - Marked text <small> - Small text <del> - Deleted text <ins> - Inserted text <sub> - Subscript text <sup> - Superscript text 11
Attributes We have seen few HTML tags and their usage like heading tags <h1>, <h2>, paragraph tag <p> and other tags. We used them so far in their simplest form, but most of the HTML tags can also have attributes, which are extra bits of information. An attribute is used to define the characteristics of an HTML element and is placed inside the element's opening tag. All attributes are made up of two parts: a name and a value. The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph on the page. The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right. Example: <html> <body> <p align="left">this is left aligned</p> <p align="center">this is center aligned</p> <p align="right">this is right aligned</p> </body> </html> 12
Core Attributes Although each tag has its own set of attributes which make make different sense in the context of this tag, some attributes are common to lots of elements. The four core attributes that can be used on the majority of HTML elements (although not all) are: id, title, class, style. The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. The title attribute gives a suggested title for the element. The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading. The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn CSS. The style attribute allows you to specify CSS rules within the element. 13
Some Other Common Attributes Name Possible Values Description align right, left, center Horizontally aligns tags valign top, middle, bottom Vertically aligns tags within an HTML element. bgcolor numeric, hexidecimal, RGB values Places a background color behind an element background URL Places a background image behind an element width Numeric Value Specifies the width of tables, images, or table cells. Specifies the height of tables, images, or table height Numeric Value cells. title User Defined "Pop-up" title of the elements. 14
Links, Images and Embedded Objects Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML links are hyperlinks and their existence actually makes HTML a hypertext markup language. You can click on a link and jump to another document. In HTML, links are defined with the <a> tag.the href attribute specifies the destination address of the link. Text enclosed by the tag defines visible part of the link. The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. src specifies the URL of an image. alt specifies an alternate text for an image. Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. URL of the object to be embedded is also defined with src attribute. 15
Styles Setting the style of an HTML element, can be done with the style attribute. The HTML style attribute has the following syntax: <tagname style="property:value;">. For example <p style="color:red;">this is a paragraph.</p> will make text in the given paragraph red. The property is a CSS property. The value is a CSS value. Once again, we ll discuss what does it mean later. Here some other examples. font-family defines the font to be used for an HTML element (e.g. style="family:verdana;"). font-size defines the text size for an HTML element (e.g. style="fontsize:150%;"). text-align defines the horizontal text alignment for an HTML element (e.g. style="text-align:center;"). 16
Comments A comment is a programmer-readable explanation or annotation in the source code of a computer program. Such annotations doesn t have any effect on program behavior and used solely to make code easier to understand. HTML also supports comments. They are ignored by browsers while rendering HTML page. You can add comment to your HTML page using following syntax which is slightly different from ordinary HTML tags: <!-- Here is your comment -->. So your comment should begin with a sequence of less than sign (<), exclamation mark and double dashes. To denote the end of your comment you should use double dash following be greater than sign (>). Use comments to help yourself and people who may look in your HTML code to explain what s going on in your code, because sometimes it may be really hard. 17
Character Entities Some characters are reserved in HTML. If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags. Character entities are used to display reserved characters in HTML. A character entity looks like this: &entity_name; or &#entity_number;, e.g. to display a less than sign (<) one should use < or < to display a greater than sign (>) one should use > > (don t forget about semicolon at the end!) A common character entity used in HTML is the non-breaking space: A non-breaking space is a space that will not break into a new line. For example two words separated by a non-breaking space will stick together when browser window is resized and text is wrapped to fit into new window size. Some other popular entities are: & or & for ampersand, " or " for double quotation mark, ' or ' single quotation mark (apostrophe), or for long dash, &tab; or for tabulation. Check out this W3C link for more. 18
Cascading Style Sheets (CSS) Early web design suffered at least two acute problems: it was difficult to assemble and maintain web sites with a unified theme; and the HTML code itself had so much formatting in it as to be unreadable, and to make it difficult for search engines and other programs to identify the content. The W3C chose to address the problem, and that of structural markup versus procedural markup in a more intelligent way. Cascading Style Sheets took much of the formatting out of the HTML itself and put it into a style sheet, which could be centralized for a given site, and referenced by all pages in that site for their appearance attributes. The word "Cascading" refers to the way in which styles for individual elements can supercede the specifications for their parents, and the way in which a style defined later can supercede one defined earlier. 19
CSS Basics Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although CSS code may be embedded directly in HTML document (either by specifying style attribute of a particular element as we ve seen earlier, or using <style> tag in the head section), the goal of separation of presentation and content achieved more efficiently by putting all CSS code into a separate file. CSS style files are very simple to create and understand. They comprise only a list of descriptive commands, always in the form attribute: value;. These descriptions may be applied to HTML elements of specific types, e.g. to change the format of an <h1> tag, to a collection of HTML elements grouped as a class, to elements of a certain division of a document, or to elements only in certain situations. We'll describe these individually. To create a style file, all you need to do is open a new file in your favorite editor. You type descriptive statements for the style of your document as discussed below, and save the file using a.css extension: e.g. mystyle.css. To get an HTML file to use your CSS file, you would insert a link tag into the header: e.g. <link rel= stylesheet type= text/css href= http://my.server.com/mydirectory/mystyle.css > 20
Applying Styles to HTML Elements of Specific Type We can change the appearance of any text associated with an any HTML element of specific type such as a heading or paragraph simply by specifying a style for that element. For example, to change <h1> and <h2> so that such headings always appear centered and in a red text, we could use the following specification: h1, h2 { color: red; text-align: center; } The line breaks and spacing are only for readability. No spaces or new lines are actually required. Note that you can set the format for multiple tags by listing them separated by commas. The actual style specification is always enclosed by braces 21
CSS Classes Sometimes we want to apply a style to many disparate HTML elements, or to only HTML elements in certain situations. One way to do this is to use classes to specify the format. For example, we could define a class to make a paragraph appear with a smaller font than normal, and to be indented using the following specification. p.smallindent{ font-size: smaller; text-indent: 2em; } Once that style is defined, we can apply it to any paragraph in our document by specifying the paragraph tag as <p class='smallindent'> Alternatively, if we wanted to apply the attributes to more than just paragraphs, we could make the definition more generic:.smallindent{ font-size: smaller; text-indent: 2em; } In this case, any HTML tag can use the class attributes. For example, we could apply them to a definition term using: <dl> <dd>the Term</dd> <dt class='smallindent'>the definition</dt> </dl> 22
IDs There is another way to restrict the effect of style specifications. This is through ID labels. ID specifications work in practice similarly to classes. The only immediate differences are that ID labels use the pound sign (#) in place of the period used to denote a class. The chief difference in these approaches is that classes allow us to specify style attributes for actual HTML elements: headings, paragraphs, spans, and so on. By contrast, IDs pertain to containers, and the attributes we set for IDs will apply to HTML elements contained in the divisions, tables, sections and such identified by those IDs. In particular, one can use <div> tags with ID labels to delineate a structural section of a document with uniform presentation properties. For example, consider the following: #main p{ font-size: smaller; color: red; } #secondary { font-size: x-small; color: blue; } The first ID specification causes any paragraph within a "main" division to be formatted in a smaller, red font, while any element of any kind in a "secondary" division would be displayed in an extra small green font. In the document these might be used as <div id="main"> <p>this text is in the main part of the document</p> </div> <div id="secondary"> <p>this is in the secondary part of the document.</p> </div> 23
Pseudoclasses Certain elements in HTML change their behavior based on the state of the browser. The principal example of this is the anchor tag (<a>). Typically the text associated with an anchor tag is blue until you click the link. Once the page the anchor tag points to has been visited, the link changes color, typically to purple. Thus, the anchor tag itself did not change, but its state within the browser session changed from normal to visited. We can control the appearance of such stateful elements using CSS pseudoclasses. Using these we can specify colors for anchor tags in their unvisited, visited, or active states. The CSS specification below would color anchor tags blue normally, green after their href has been visited, and yellow when the mouse hovers over the link text. :link{color:blue;} :visited{color:green;} :hover{color:yellow;} 24
CSS Properties You ve just seen some them, but there are much more. See the notes by Prof. Cooper for some of the most widely used: http://www.math.wsu.edu/students/odykhovychn yi/m300/notes/stylecheat.html You can also use this link as a complete reference: https://www.w3schools.com/cssref/ 25
Why Cascading? CSS information can be provided from various sources. These sources can be the web browser, the user and the author. The information from the author can be further classified into inline, media type, importance, selector specificity, rule order, inheritance and property definition. CSS style information can be in a separate document or it can be embedded into an HTML document. Multiple style sheets can be imported. Different styles can be applied depending on the output device being used; for example, the screen version can be quite different from the printed version, so that authors can tailor the presentation appropriately for each medium. The style sheet with the highest priority controls the content display. Declarations not set in the highest priority source are passed on to a source of lower priority, such as the user agent style. This process is called cascading. You can specify the highest priority for particular property by using!importnat annotation, e.g. p { color: red!important; } Inline definition using style attribute has higher priority than properties defined using classes or IDs. In most of the browsers user is capable of defining CSS style which will override the one provided by a particular website. This may be used to improve accessibility. 26
Use <div> instead of <table> Strive to avoid tables. You will fail, since tables are the only elements in HTML that give full control of alignment. Furthermore, they processed more slowly than divisors and you need more tags achieve the same results than you will need while using divisors. The only case when table should be used is actually displaying tabular data. Any page structure created with <table> could be easily achieved using <div> and CSS display and float properties. e.g..div-table { display: table; width: auto; border: 1px solid black; }.div-table-row { display: table-row; }.div-table-col { float: left; display: table-column; border: 1px solid; } Check out these links for more https://www.w3schools.com/cssref/pr_class_display.asp https://www.w3schools.com/cssref/pr_class_float.asp options for display and float properties. 27
CSS Units CSS has several different units for expressing a length. Many CSS properties take "length" values, such as width, margin, padding, font-size, borderwidth, etc. Length is a number followed by a length unit, such as 10px, 2em, etc. A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted. There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. e.g. em defines length relatively to the font-size of the element (2em means 2 times the size of the current font); using percent sign (%) you can define size relatively to the containing block. The absolute length units are fixed and a length expressed in any of these will appear as exactly that size. You can use such units as cm (centimeters), in (inches), px (pixels, 1px = 1/96th of 1in) or pt (points, 1pt = 1/72 of 1in) 28
Some Points of Style Always strive to keep your pages independent of the platform/browser used to view them. There are too many pages on the Web that look good in e.g. Internet Explorer, but do not work with other browsers. Strive to comply with standards. There are too many pages on the Web that use old or syntactically incorrect HTML. Strive to avoid tables. You will fail, since tables are the only elements in HTML that give full control of alignment. However, there are too many pages on the Web that use tables much more than is necessary, and this can lead to formatting problems when content changes. Strive to keep procedural and structural markup separated. Use Cascading Style Sheets as much as you can. 29
ICE #5 Create a web page which looks like this: 30