Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Note - Super Substitute Teachers
Document related concepts
Transcript
Introduction to HTML What is HTML? • Hyper Text Markup Language (HTML) is a language for describing web pages. • HTML is not a programming language, it is a markup language • A markup language is a set of markup tags to describe how data appears in web pages • You can use a plain text editor to edit HTML files but professional web developers often prefer HTML editors like FrontPage or Dreamweaver instead of writing plain text. Web Pages • HTML documents are simply web pages. • The purpose of a web browser (like Firefox) is to read HTML documents and display them as web pages. • HTML documents contain the data that will appear when the page is opened in a browser and describes how the data is organized (ie. data can be placed in a paragraph, a list, a table). • HTML documents also can show how data is formatted although most modern web pages use Cascading Style Sheets (CSS) to indicate how data is formatted (more on this later). • When you save an HTML file, you must use either the .htm (older) or the .html (more recent) file extension. • Note that the web does not like spaces in filenames! HTML Tags • The browser does not display the HTML tags but uses the tags to interpret the content of the page. • HTML markup tags, usually just called 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 or opening tags and the second tag is the end tag or closing tags • The end/closing tags have a slash (/) before the tag name. • HTML tags are not case sensitive: <P> means the same as <p>. However, it is strongly recommended that lowercase is always used as future browsers will only recognize lowercase tags. HTML Elements • An HTML element is everything from the start tag to the end tag. • Examples of HTML elements: – <p> This is a paragraph </p> – <a href="default.htm" > This is a link </a> – <br /> • HTML Element Syntax – An HTML element starts with a start tag / opening tag and ends with an end tag / closing tag. – The element content is everything between the start and the end tag. – Some HTML elements have empty content. – Empty elements are closed in the start tag – the / is placed after the tag (ex. <br />) HTML Attributes • HTML elements can have attributes which provide additional information about an element • Attributes are always specified in the start tag and start with the name of the specific attribute followed by the = sign followed by the value of the attribute in quotes (“”) • Examples of attributes: – <p class=“menu” > – <a href="http://hcss.alcdsb.on.ca"> HTML Comments • Comments can be inserted into the HTML code to make it more readable and understandable for people looking at your code. • Comments are ignored by the browser and are not displayed. • Comments start with <!-- and end with --> (There is an exclamation point after the opening bracket, but not before the closing bracket). • Example: <!-- This is an HTML comment --> • Good HTML coders always use comments to explain their code. <html> <body> HTML Example <h1>My First Heading</h1> <p>My first paragraph.</p> <a href="http://hcss.alcdsb.on.ca ">This is a link</a> <img src=“hcPhoto.jpg" width="104" height="142" /> </body> </html> Explanation of HTML Code • The text between <html> and </html> describes the web page. All web pages have these tags. • The text between <body> and </body> is the visible page content. All web pages have these tags. • The text between <h1> and </h1> is displayed as a heading which will be displayed in large text. • The text between <p> and </p> is displayed as a paragraph. • The text between <a> and </a> is displayed as a link to the index page of HCToday.ca • The text contained in the <img> tag displays the photograph “hcPhoto.jpg” on the web page. Note the attributes are width and height of the picture. Graphics on the Web • In a word processing or desktop publishing document, a graphic is inserted into the document. • When displaying a graphic (or any other multimedia item) on a web page, a link is made to the specific graphic file. • The web page provides a “window” to display the contents of the graphic file. • This significantly decreases the size of the HTML file but can lead to broken links if files are moved • Note that file management is vital when designing web sites!!! • The only graphic formats that can be used on the web are: – jpeg (jpg) – png – gif
