HTML BASICS What tools will we use? We will use a text editor to write our code and a browser to test Examples of Text Editors: Notepad Notepad ++ Textwrangler Sublime Text etc What is HTML? HTML is a markup language for describing web documents (web pages). HTML stands for Hyper Text Markup Language A markup language is a set of markup tags HTML documents are described by HTML tags Each HTML tag describes different document content What is HTML? HTML stands for Hyper Text Markup Language HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements are represented by tags Browsers do not display the HTML tags, but use them to render the content of the page What is HTML? HTML stands for Hyper Text Markup Language Describes the structure of Web pages Elements are the building blocks of HTML pages and are represented by tags HTML tags label pieces of content such as "heading", "paragraph", "table", and so on Browsers do not display the HTML tags, but use them to render the content of the page <tagname>Some Content in here….</tagname> Defines the type of element The stuff that gets displayed Close off the element HTML Tags HTML tags are keywords (tag names) surrounded by angle brackets: <tagname>content</tagname> HTML tags normally come in pairs like <p> and </p> The first tag in a pair is the start tag, the second tag is the end tag The end tag is written like the start tag, but with a slash before the tag name The start tag is often called the opening tag. The end tag is often called the closing tag. Syntax of HTML <html> <head> <title>SS</title> </head> <body> html Codes/tags In Here </body> </html> Example <html> <head> <title>Hello World</title> </head> <body> <h1>My First page at MMU</h1> <p>My first Page at MMU</p> </body> </html> HTML Example Explained The text between <html> and </html> describes an HTML document The text between <head> and </head> provides information about the document The text between <title> and </title> provides a title for the document The text between <body> and </body> describes the visible page content The text between <h1> and </h1> describes a heading The text between <p> and </p> describes a paragraph Where do I save my Files or pages? Computer ⇒ public_html yourUsername ⇒ Save the HTML Page Steps 1: You need a folder to work with, create a folder Steps 2: Open Notepad or any editor; Save the file on your computer in the folder you created earlier Select File > Save as in the Notepad or editor menu. Name the file "index.html" or any other name ending with .html extension or the preferred encoding for HTML files. How do I see my website? http://cs1.ucc.ie/~yourUsername How do I test my Code/Scripts? Right Click your .html file Open with….. (a browser) OR Upload to public_html and visit your website: http://cs1.ucc.ie/~yourUsername Browsers ** + many more lesser known and developed View HTML Page View HTML Page in Your Browser Open the saved HTML file in your favorite browser. The result will look much like this: To open a file in a browser, double click on the file, or right-click, and choose open with What’s the difference? Personal Preference and Feature Compatibility Can I Use Browser Comparisons
