HTML Intro
advertisement
HTML Introduction What is HTML? HTML is a language for describing web pages. • HTML stands for Hyper Text Markup Language • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags • HTML uses markup tags to describe web pages HTML Tags HTML markup tags are usually called HTML tags • HTML tags are keywords surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • Start and end tags are also called opening tags and closing tags HTML Documents = Web Pages • HTML documents describe web pages • HTML documents contain HTML tags and plain text • HTML documents are also called web pages The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page as is shown in the very simple example below: (Example 1) <html> <body> <h1> My First Heading </h1> <p> My first paragraph </p> </body> </html> Example 1 Explained The The The The • • • • text text text text between between between between <html> and </html> describes the web page <body> and </body> is the visible page content <h1> and </h1> is displayed as a heading <p> and </p> is displayed as a paragraph The example above does work as we will see later but normally the web page contains header information as is shown below: HTML Basic Document <html> <head> <title> Document name goes here </title> </head> <body> Visible text goes here... </body> </html> The header section contains the document title and also many of the tags/elements that establish the 'look and feel' of the page – more later. I will not attempt to explain the use of all of the possible tags/elements I will just cover those that will be used in the examples shown below. Page Elements Heading Elements <h1>Largest Heading</h1> <h2> <h3> <h4> <h5> . . . . . . . . . </h2> . </h3> . </h4> . </h5> <h6>Smallest Heading</h6> The heading elements normally provide different text sizes (and possibly fonts) – the largest being <h1> and the smallest <h6>. Text Elements <p>This is a paragraph</p> <br /> (line break – moves text following it down 1 line) <hr /> (horizontal rule) Physical Text Styles <b>This text is bold</b> <i>This text is italic</i> - produces text in italics Tags Tags are specified within lower than “<” and greater than “>” symbols and each tag opened must be closed later. As an example lets look at the paragraph tag <p>. The <p> tag defines the start of a paragraph and the </p> specifies the end of that paragraph. Each paragraph can be set to display a different 'look and feel' controlled by a style setting. It will also remove superfluous line feeds an spaces as an example: <p> this is a line of text as a test </p> will result in:- “this is a line of text as a test” – all line feeds removed and all but the first space removed. To specify a paragraph do: <p>This is my paragraph</p> - note the start being designated by being enclosed in <> symbols and the end of the paragraph by </>, the “/” indicating the end. This is the convention for all tags. Now lets look at those tags we will be using: Font Specify the font size, font face and color of text: <font size="1" color="red">My text</font> <font size="2" color="darkblue">My text</font> <font face="Comic Sans MS" color="white">My text</font> Note the American spelling of color also note that the third example use a white font which means it will not be visible on a white background. Div The <div> tag defines a division or a section in an HTML document and is normally used to define a specific area on a page which looks different to other areas of the page. Basically it is just a container for other tags. When a div is specified it can be set to a specific size and colour by using the following attributes: id width height style unique identifier for the tag of the div element of the div colour, font etc. alignment of contents – this is deprecated (not approved of) but still works in current browsers. Examples will be seen later. Anchor <a> Anchors mark the beginning or end of hypertext links. The HREF attribute (which is actually optional) marks the anchor as the start of a link to another document or resource (it could point, for example, to an image file), or to a particular place in another document. The address of the referenced document can be specified by an absolute or partial URL: <A HREF="URL"> anchor </A> We will see examples later. Creating an HTML document /Web Page. No special tools are required – just notepad. Open Note pad and enter the example data then do a 'Save As' filename.html Ensure that the Save As Type is set to All Files. Having saved the file click on the filename and it will open Internet Explorer or Firefox (etc.) and display your page.
