HTML
advertisement
HTML rev 01/09/2016 Hyper Text Markup Language HTML -history Hypertext Markup Language is the main language for creating web pages . It was first created by Tim Berners-Lee in 1989-1990. (http://www.w3.org/People/Berners-Lee/). He is now the director of the group that manages web standards (w3c.org) Overview rev 01/09/1026 HTML is written in the form of HTML elements (Think “commands” ) Surrounded by tags, start and end, enclosed in angle brackets (like <html> and </html>), How does it work The purpose of a web browser is to read HTML documents and compose them into visible web pages --called rendering) Name some browsers Common elements <!doctype html> html 5 indicator, not an element <html> …</html> first, last tags, html is the element <body>…</body> Actual content within the page <h1> …</h1> <h1> font size, largest default size…down to <h6> <title> …</title> Shows page title in address bar <head> … </head> section where title goes <p> …</p> content to display goes as series of paragraphs <!-- comments here -- >The Comment element: Creating a simple Web page •Start Notepad •Choose File>New •File>Save (even though it’s blank) in your USB device’s jma260/HTML folder as simple.htm Type: Rendering and editing To Render (display page) right-click on simple.htm and choose open with internet explorer or open with chrome Or double-click the file name To Edit: Right-click and choose open with notepad Add another line: <!doctype html> <html> <body> <h1> Hello World </h1> Page by John Shepherd </body> </html> Make the </h1> into </h1 and watch Fix Note html ignores spaces, tabs etc. You can, however, put them in your Notepad version to make it more readable . Add a comment Paragraphs and blocks Add 2 paragraphs <p> Paragraph 1 </p> <p>Paragraph 2 </p> Add 2 paragraphs Are members of block category objects Block Objects <p> is of the block category (displays a blank line before and after). Thus, in between two paragraphs there are two blank lines. <h1> is also block, so it causes a blank line before and after Blocks P1 P2 Double lines here <title> Goes inside a <head> element and shows in the address bar of the browser, also in Favorites, and is used by search engines. Type“My Hello World Page” (add head and title) My Page • Save as simple3.htm • Render Run on Web Our simple3 page is saved where? What folder? Where must it be to be viewed over the Web? Note: The name of a page that is automatically rendered when the browser sees it is index.htm Want to transfer the simple3.htm page from USB to pub/jma260/html folder (i.e to our z: drive) Index.htm If browser sees one, it is automatically rendered. Copy simple3.htm to root folder on z: I know, we now have 2 simple3.htm pages on Z: One in html folder, one in root folder Rename the root folder page, simple3.htm, to index.htm Save and test www.jma.duq.edu/users/shepherd/pub/jma260 OR Click on our section link on schedule page Render to Z: and test Drag (simple3.htm ) from your USB device’s JMA260/html folder to your network (Z:): drive’s pub/JMA260/html folder…will always work , as long as in our labs…205 and 345 TEST Mine might be: www.jma.duq.edu/users/shepherd/pub/jma260/html/sample3.htm Close
