Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 12 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
12
Dung lượng
228,5 KB
Nội dung
Powerpoint Templates Page 1 Powerpoint Templates Let’s Build a Website by Sybil Prince Nelson Powerpoint Templates Page 2 Basics What is HTML? HTML is the language used to create web pages. It tells your browser (like Internet Explorer or Firefox) what to display on a web page. What does HTML stand for? HTML stands for HyperText Markup Language. HypertextText with links to other pages. Can contain images and other things. Basically, a web page.Markup LanguageThe set of instructions that describe how text should be displayed. For HTML, these instructions are called tags.HTML = HyperText Markup Language = The tags that tell your browser what to display on a web page. How Does HTML Work? In an HTML tutorial for beginners it's all about the tags. Browsers, like Internet Explorer or Firefox, are used to display web pages. Tags tell your browser what to display on a web page. This is the HTML tag: <html> It's the main tag. It says, "Everthing after this is a web page." There are beginning and ending tags. They come in pairs: <html> </html> Your browser understands this. Your browser doesn't display tags. It displays only what is between the tags. Powerpoint Templates Page 3 A Basic Webpage <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.d td"> <html> <body> <h1>This is a heading</h1> <p>This is the paragraph text. This is more paragraph text. This is more paragraph text. </p> </body> </html> Powerpoint Templates Page 4 Let’s get a little fancier HTML Elements Most HTML elements have these four parts: A starting tag Example: <p> An ending tag Example: </p> The content between the starting and ending tags Example: "Once upon a time a girl with… etc." Attributes (more about attributes in the next section) Example: style="background-color:yellow" Here's an example of an HTML element: <p style="background-color:yellow">Once upon a time a girl with beautiful long golden hair… etc.</p> By the way… there are a few elements that only have one tag. For example: The <br /> element causes the browser to skip to the next line. It's the "line break" tag. There are no contents or ending tag for these types of elements. Powerpoint Templates Page 5 Still getting fancy HTML Attributes A HTML element can have attributes. An attribute gives more information about the contents of an element to the browser. Think of an attribute as quality or characteristic of the element. The attribute of an element is located in the starting tag. <p style="background-color:yellow">blah blah blah.</p> This particular style attribute tells the browser to make the background color of that paragraph yellow. If you know your HTML basics it will be much easier for you to learn what you need to know in order to build your website. If you are going to be creating websites for a while (there's a good chance you will be) tags, elements and attributes are things you want to be clear on. Powerpoint Templates Page 6 Let’s try it A friendly tool. Powerpoint Templates Page 7 Ways to Build a Website There are several ways to build a website: • Point and click software (fast, not flexible). • Manually writing the HTML (important to learn, requires time). – notepad, word, powerpoint • Using an HTML Editor (efficient once learned, HTML knowledge helps). • Using a template (easy, efficient, must use HTML) Powerpoint Templates Page 8 Some helpful html language Email: HTML Code: <a href= "mailto:abc@mail.com" >Email Example</a> Images: HTML Code: <img src=“picturename.gif" /> Important: Where is this picture? Src stands for source. There are two ways to define the source of an image. First you may use a standard URL. (src=http://www.Tizag.com/pics/htmlT/pitcurename.gif) As your second choice, you may copy or upload the file onto your web server and access it locally using standard directory tree methods. (src=" /picturename.gif") The location of this picture file is in relation to your location of your .html file. For more info on images: http://www.tizag.com/htmlT/images.php Powerpoint Templates Page 9 Your MUSC space • Step 1 My computer < Map Network Drive • Step 2 Enter \\homeroom.musc.edu\netID • Step 3 For user name enter clinlan\netID Powerpoint Templates Page 10 Let’s Try it! [...]... • Think about the function of your site • Go for simplicity as opposed to clutter • Avoid text fonts smaller than 11px • Keep a consistent layout • Every few edits, check your progress Powerpoint Templates Page 11 Assignment Create a website that includes the following: • • • • • • • Name Picture A short bio Personal/contact info Current classes Research interests CV Email me a link to your website. .. Assignment Create a website that includes the following: • • • • • • • Name Picture A short bio Personal/contact info Current classes Research interests CV Email me a link to your website Powerpoint Templates Page 12 . tool. Powerpoint Templates Page 7 Ways to Build a Website There are several ways to build a website: • Point and click software (fast, not flexible). • Manually writing the HTML (important to learn, requires. what to display on a web page. What does HTML stand for? HTML stands for HyperText Markup Language. HypertextText with links to other pages. Can contain images and other things. Basically, a. getting fancy HTML Attributes A HTML element can have attributes. An attribute gives more information about the contents of an element to the browser. Think of an attribute as quality or characteristic