Markup Languages (HTML)

Markup Languages (HTML)
Chapter 2 Markup Languages (HTML)

Markup Languages A markup language is a computer language that uses tags to define elements within a document. It is human-readable, meaning markup files contain standard words, rather than typical programming syntax. While several markup languages exist, the two most popular are HTML and XML. An abbreviation of "Hyper Text Mark-up Language”. Hyper is the opposite of linear. Linear means that the program is executed sequentially in an order, but HTML is different - you can randomly select whatever, wherever and whenever you want. Text is self-explanatory. Mark-up the text the same way you do in a text editing program with headings, bullets and bold text and so on. Language is what HTML is. It uses many English words. HTML is a markup language used for creating webpages. Basic page tags, such as <head>,<body>, and <div> define sections of the page, while tags such as <table>, <form>, <image>, and <a> define elements within the page. Most elements require a beginning and end tag, with the content placed between the tags. For example, a link to the TechTerms.com home page may use the following HTML code: <a href="

Extensible Markup Language
XML is used for storing structured data, rather than formatting information on a page. While HTML documents use predefined tags, XML files use custom tags to define elements. For example, an XML file that stores information about computer models may include the following section: <computer> <manufacturer>Dell</manufacturer> <model>XPS 17</model> <components> <processor>2.00 GHz Intel Core i7</processor> <ram>6GB</ram> <storage>1TB</storage> </components> </computer> XML is called the "Extensible Markup Language" since custom tags can be used to support a wide range of elements. Each XML file is saved in a standard text format, which makes it easy for software programs to parse or read the data. Therefore, XML is a common choice for exporting structured data and for sharing data between multiple programs.

HTML Code – First look < html > < head >
< title > Popular Websites: Google < /title > < /head > < body > < h1 > About Google < /h1 > < p > Google is best known for its search engine, although Google now offers a number of other services. < /p > < p > Google’s mission is to organize the world’s information and make it universally accessible and useful. < /p > < p > Its founders Larry Page and Sergey Brin started Google at Stanford University. < /p > < /body > < /html >

Tags and Elements If you look at the first and last lines of the code for the last example, you will see pairs of angle brackets containing the letters “ html ” Starting on the first line, the first angled bracket looks like a less - than sign, then there are the letters “ html ,” followed by a second angled bracket, which looks like a greater – than sign. The two brackets and all of the characters between them are known as a tag . A pair of tags and the content these include are known as an element . In Figure 1 - 2, you can see the heading for the page of the last example.

Separating Heads from Bodies
Whenever you write a web page in HTML, the whole of the page is contained between the opening < html > and closing < /html > tags. There are two main parts to the page: The < head > element: Often referred to as the head of the page, this contains information about the page (this is not the main content of the page). For example, it might contain a title and a description of the page, or instructions on where a browser can find CSS rules that explain how the document should look. It consists of the opening < head > tag, the closing < /head > tag, and everything in between. The < body > element: Often referred to as the body of the page, this contains the information you actually see in the main browser window. It consists of the opening < body > tag, closing < /body > tag, and everything in between. Together, the < html > , < head > , and < body > elements make up the skeleton of an HTML document — they are the foundation upon which every web page is built. Inside the < head > element of the first example page, you can see a < title > element: < head > < title > Popular Websites: Google < /title > < /head >

< samp > , and < address >
Elements for Marking Up Text You now know that an HTML page is made up of elements that describe how its content is structured. learning the different elements you can use to describe the structure of text: The six levels of headings: < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , and < h6 > Paragraphs < p > , preformatted sections < pre > , line breaks < br / > , and addresses < address > Presentational elements: < b > , < i > , < u > , < s > , < tt > , < sup > , < sub > , < strike > , < big > , < small > , and < hr / > Phrase elements such as : < em > , < strong > , < abbr > , < acronym > , < dfn > , < blockquote > , < q > , < cite > , < code > , < kbd > , < var > , < samp > , and < address > Unordered lists using : < ul > and < li > Ordered lists using : < ol > and < li > , and Definition lists using : < dl > , < dt > , and < dd > Editing elements such as : < ins > and < del > Grouping elements : < div > and < span >

< !-- comment goes here -- >
Comments You can put comments between any tags in your HTML documents. Comments use the following syntax: < !-- comment goes here -- > Anything after < ! - - until the closing - - > will not be displayed. It can still be seen in the source code for the document, but it is not shown onscreen. It is good practice to comment your code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. The < font > Element The < font > element allows you to control the presentation of text — its size, the typeface, and color e.g., < font face=”arial, verdana, sans-serif” size=”2” color=”#666666” >

< h1 > Block-Level Elements < /h1 >
Understanding Block and Inline Elements Now that you have seen many of the elements that can be used to mark up text, it is important to make an observation about all the elements that live inside the < body > element, because each one can fall into one of two categories: Block - level elements appear on the screen as if they have a carriage return or line break before and after them. For example, the < p > , < h1 > , < h2 > , < h3 > , < h4 > , < h5 > , < h6 > , < ul > , < ol > , < dl > , < pre > , < hr / > , < blockquote > , and < address > elements are all block - level elements. They all start on their own new lines, and anything that follows them appears on its own new line, too. Inline elements appear within sentences and do not have to appear on new lines of their own. The < b > , < i > , < u > , < em > , < strong > , < sup > , < sub > , < big > , < small > , < ins > , < del > , < code > , < cite > , < dfn > , < kbd > , and < var > elements are all inline elements. For example: < h1 > Block-Level Elements < /h1 > < p > < strong > Block-level elements < /strong > always start on a new line. The < code > & lt;h1 & gt; < /code > and < code > & lt;p & gt; < /code > elements will not sit on the same line, whereas the inline elements flow with the rest of the text. < /p >

Core Elements and Attributes
The following elements form the basic structure of every document. The < html > Element The < html > element is the containing element for the whole HTML document. After the optional XML declaration and required DOCTYPE declaration, each HTML document should have an opening < html > tag and each document should end with a closing < /html > tag. The < head > Element The < head > element is just a container for all other header elements. It is the first thing to appear after the opening < html > tag. Each < head > element should contain a < title > element indicating the title of the document, < object > , which is designed to include images, JavaScript objects, Flash animations, MP3 files, < link > to link to an external file, such as a style sheet or JavaScript file. < style > to include CSS rules inside the document. < script > for including script in the document. < meta > , which includes information about the document such as keywords and a description, which are particularly helpful for search applications; The < title > Element You should specify a title for every page that you write using the < title > element. It is presented and used in several ways: By search engines that use its content to help index pages. The < body > Element The < body > element appears after the < head > element and as you have already seen, it contains the part of the web page that you actually see in the main browser window, which is sometimes referred to as body content .

Links and Navigation Basic Links Linking to Other Web Pages
What really distinguishes the Web from other mediums is the way in which a web page can contain links (or hyperlinks) that you can click on to be taken from one page to another page. The link can be a word, phrase, or image. When you link to another page in your own web site, the link is known as an internal link . When you link to a different site, it is known as an external link . Basic Links A link is specified using the < a > element. Anything between the opening < a > tag and the closing < /a > tag becomes part of the link that users can click in a browser. Linking to Other Web Pages To link to another web page, the opening < a > tag must carry an attribute called href ; the value of the href attribute is the name of the file you are linking to < body > < p > Return to the < a href=”index.html” > home page < /a > . < /p > < /body > You can also use the title attribute on a link; the value of the title attribute should be a description of what the link will take you to, which will be displayed in a tooltip when you hover over the link. This can be especially helpful if you do use an image for a link. The following is a link to the Google homepage: < a href=” title=”Search the Web with Google” > Google < /a > is a very popular search engine.

Linking to E - mail Addresses
You ’ ve probably seen a link that shows an e - mail address, which when clicked on opens a new e - mail in your e - mail program, ready for you to send an e - mail to that address. To create a link to an e - mail address, you need to use the following syntax with the < a > element: < a > < /a > Here, the value of the href attribute starts with the keyword mailto , followed by a colon, and then the e - mail address you want the mail sent to. As with any other link, the content of the < a > element is the visible part of the link shown in the browser, so this would also work: < a > us < /a >

Directories and Directory Structures
A directory is simply another name for a folder on a web site; in the same way that your hard drive contains different folders, a web site can be said to contain directories. Usually you will find that a web site contains several directories, and that each directory contains different parts of a web site. For example, a big site with several subsections will have a separate directory for each section of that site, and also different directories for different types of files. When you start to build any web site you should create a good directory structure that can withstand growth. As you learn about linking, it ’ s helpful to learn some of the terms that are used in describing directory structures and the relationships between directories. The root directory (or root folder) is the main directory that holds the whole of you web site. A subdirectory is a directory that is within another directory. A parent directory is a directory that contains another directory.

Understanding URLs A URL or Uniform Resource Locator specifies where you can find a resource on the web; you are probably most used to thinking of them as web addresses. As you move around the Web, you will see the URL of each web page in the address bar of your browser. If you look at the example URL below, there are three key parts to the URL: the scheme, the host address, and the filepath.

The scheme identifies the way a file is transmitted
The scheme identifies the way a file is transmitted. Most web pages use something called the Hypertext Transfer Protocol (HTTP) to pass information to you, which is why most web pages start with , although you might have noticed other prefixes such as when doing banking online (which is a more secure form of http) or ftp:// when downloading large files. The host address is usually the domain name for the site, e.g., wrox.com . Often you will see www before the domain name, although it is not actually part of the domain name itself. The host address can also be a number called an IP address. The filepath always begins with a forward slash character, and may consist of one or more directory names (remember, a directory is just another name for a folder on the web server). The filepath may end with a filename at the end. Here, BeginningHTML.html is the filename: /books/BeginningHTML.html The filepath will usually correspond to the directory structure of the web site, so in this case the BeginningHTML.html page would be found in a directory called books .

Absolute and Relative URLs An absolute URL contains everything you need to uniquely identify a particular file on the Internet. This is what you would type into the address bar of your browser in order to find a page. As you can see, absolute URLs can quickly get quite long, and every page of a web site can contain many links. When linking to a page on your own site, however, you can use a shorthand form: relative URLs. A relative URL indicates where the resource is in relation to the current page. You can also use relative URLs to specify files in different directories. For example, imagine you are looking at the homepage for the entertainment section of the following fictional news site:

Images You will start by learning how to add images to your documents using the < img > element. We can also use an image as a hyper link. We can even divide an image up into sections so that different parts of the image link to different pages — this is known as an image map . Adding Images Using the < img > Element Images are added to a site using the < img > element, which has to carry at least two attributes: the src attribute, indicating the source of the image, and an alt attribute, which provides a description of the image. For example, the following line would add the image called logo.gif into the page (in this case, the image lives in a directory called images). < img src=”logo.gif” alt=”Wrox logo” / >

The src Attribute The src attribute tells the browser where to find the image. The value is a URL and, just like the links you met in the last chapter, the URL can be an absolute URL or a relative URL. < img src=”logo.gif” / > The alt Attribute The alt attribute must appear on every < img > element and its value should be a text description of the image. < img src=”logo.gif” alt=”Wrox logo” / > The height and width Attributes The height and width attributes specify the height and width of the image, and the values for these attributes are almost always shown in pixels. < img src=”logo.gif” alt=”Wrox Logo” height=”120” width=”180” / > The align Attribute The align attribute was created to align an image within the page (or if the image is inside an element that is smaller than the full page, it aligns the image within that element). <img src=”images/cover.gif” alt=”Book cover” align=”left” />

< table align=”center” > < table border=”1” align=”left” >
The < table > Element Creates a Table The < table > element is the containing element for all tables. It can carry the following attributes: The align Attribute Although it is deprecated, the align attribute is still frequently used with tables. When used with the < table > element, it indicates whether the table should be aligned to the left (the default), right , or center of the page. You use the attribute like so: < table align=”center” > < table border=”1” align=”left” > < tr > < td > Row 1, Column 1 < /td > < td > Row 1, Column 2 < /td > < /tr > < td > Row 2, Column 1 < /td > < td > Row 2, Column 2 < /td > < /table >

The bgcolor Attribute The bgcolor attribute sets the background color for the table. The value of this attribute should either be a color name or a six - digit code known as a hex code . The syntax is as follows: bgcolor=”red” The border Attribute If you use the border attribute, a border will be created around both the table and each individual cell. The value for this attribute is the width you want the outside border of the table to be, in pixels. If you give this attribute a value of 0 , or if you do not use this attribute, then you should not get any borders on either the table or any cells. border=”0” The cellpadding Attribute The cellpadding attribute is used to create a gap between the edges of a cell and its contents. The value for this attribute determines the amount of space or padding inside each wall of the cell, specified either in pixels or as a percentage value (where the percentage is a percentage of the width of each cell). cellpadding=”5” or cellpadding=”2%” The cellspacing Attribute The cellspacing attribute is used to create a space between the borders of each cell. The value for this attribute can be either the amount of space you want to create between the cells, in pixels, or a percentage value. cellspacing=”6” or cellspacing=”2%”

The dir Attribute The dir attribute is supposed to indicate the direction of text that is used in the table. Possible values are ltr for left to right text and rtl for right to left (for languages such as Hebrew and Arabic): dir=”rtl” The frame Attribute The frame attribute is supposed to control the appearance of the outermost border of the whole table, referred to here as its frame , with greater control than the border attribute. If both the frame and border attributes are used, the frame attribute takes precedence. The syntax is: frame=” frameType ” The following table shows the possible values for the frame attribute. Value Purpose Void No outer border (the default) above A border on the top only below A border on the bottom only hsides A border on the top and bottom lhs A border on the left side of table rhs A border on the right side of table vsides A border on the left and right sides of table box A border on all sides border A border on all sides

Markup Languages (HTML)

Similar presentations

Presentation on theme: "Markup Languages (HTML)"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Markup Languages (HTML)

Similar presentations

Presentation on theme: "Markup Languages (HTML)"— Presentation transcript:

Similar presentations

About project

Feedback