1 / 9

Introduction to HTML: Structure, Tags, and Creating Pages

Learn about HyperText Markup Language, HTML tags, and basic HTML file structure to create web pages. Understand how to open and edit HTML files and transfer them using FTP.

emmanuel-frank
Télécharger la présentation

Introduction to HTML: Structure, Tags, and Creating Pages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WDD Lecture 2 HTML Introduction

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. 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>

  8. 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

  9. 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

More Related