90 likes | 168 Views
WDD Lecture 2. HTML Introduction. What is HTML?. HyperText Markup Language HTML is not a traditional, sequential execution language HTML is a file with instructions on how to display text, images, colors and much more
E N D
WDD Lecture 2 HTML Introduction
What is HTML? • HyperText Markup Language • HTML is not a traditional, sequential execution language • HTML is a file with instructions on how to display text, images, colors and much more • HTML files are really just text files with the .html file extension, then interpreted by the browser • Standardized by the World Wide Web Consortium (W3C) • How to open an html file
What HTML Does • Gives structure to ordinary text via tags • Allows for insertion of web page elements such as images, text, videos • Structures the layout of a page
What HTML Tags look like • Tags tell our browser details about how we want items to be displayed • Tags don’t show up on a web page, but are interpreted behind the scenes • Tags are created by an opening and closing brace. • Each tag with few exceptions must also be closed by the same tag with a backslash following the opening brace
More on HTML Tags • In short, html consists of an opening tag, contents in between, and a closing tag • HTML elements can have attributes in the opening tag • Attributes further specify how the browser should display the item
Where do we get html tags • There is a set number of existing tags- you can’t just make them up • Some tags deal with images, other with text, the best option is to refer to a full list of tags to find what you need • Full List: http://www.w3schools.com/tags/default.asp
Basic Structure of an HTML FIle • Most Basic <html> <head> ---------------------------------instructions on how to load page here </head> <body> -----------------------------------instructions on how to show page here </body> <html>
Common Html Tags • Bold • <b></b> • Will bold whatever is between the tags • Paragraph • <p></p> • Places the text into a paragraph • Lists and List Items • Bulleted Lists: <ul></ul> • In between the start and end, place any number of list items • List Item: <li></li> • List item for the bulleted list, anything can go in between the start and end • Images • Different, no end tag, instead the start tag ends with a / • <imgsrc=“” alt=“”/> • Example: <imgsrc=“myimage.jpg” “You see this if the image can’t be found”/> • Can specify width and height • Demo Creating Full Page
Saving your Files: Login or FTP • Each class account has a folder called “public_html” that you can access from the web • This is where files will be stored, refer to lecture one for how I want to save them • Ways to transfer files • Login to lab computer, copy files into public_html • Access the files remotely via ftp • FTP- File Transfer Protocal • Download a ftp client, such as FileZilla • Select port 21 (SFTP port, most web servers use ftp though) • Type in class account information, server should be • Nova.cs.berkeley.edu • FileZilla is a drag and drop application. Drag your files and drop them in • Potential Issues-File Permissions • Demo