1 / 15

Introduction to Web Page Design

Introduction to Web Page Design. Objectives. Introduce General Tags Tag Structure Explore Tag Types Explore Tag Attributes Add Attributes/Style to General Tags. Tag Structure. Most tags has the same structure** < tagname attribute1="setting1" attribute2="setting2" …> content

mvance
Download Presentation

Introduction to Web Page Design

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. Introduction to Web Page Design

  2. Objectives • Introduce General Tags • Tag Structure • Explore Tag Types • Explore Tag Attributes • Add Attributes/Style to General Tags

  3. Tag Structure • Most tags has the same structure** • <tagname attribute1="setting1" attribute2="setting2" …> content </tagname> • <tagname attribute1="setting1" attribute2="setting2" …> • The is the opening portion of the tag • content • Content that is displayed within the tag (sometimes optional) • </tagname> • The is closes the tag **(only first part needed for some tags)

  4. Paragraph Tag <p>This will create a paragraph. </p> <p style="text-indent: 50px;">This is another paragraph. This paragraph will be indented. </p> The <p> tag is used for paragraphs. A useful style is setting indentation using text-indent.

  5. Image Tag <imgsrc="images/ubcrest.png" alt="UB Crest"> <imgsrc="ublogo.png" alt="UB Logo" style="height:100;width:300"> • The <img> tag displays an img. • src="…" tells where the image file is located • Can be relative to our current location • Can be full path to image • alt="…" is text that is read if the site is viewed in accessibility mode • width/height can be set to stretch or shrink image • Only setting one of width or height will scale image

  6. Anchor Tag (links) <a href="http://www. buffalo.edu/"> UB Homepage </a> <a href="https://www.cse.buffalo.edu/" target="_blank"> CSE Department Homepage </a> • The <a> tag is used to display hyperlinks. • href="…" tells where link points to • Can be relative or full path • target="_blank" opens the link in a new window

  7. List Tags <ul> <li>HTML</li> <ul> <li>head</li> <li>body</li> </ul> <li>CSS</li> </ul> <ol> <li>tags</li> <li>styling</li> </ol> • The <ul> tag is used to create bulleted (unordered) lists. • Can nest lists – changes bullets/indents • The <ol> tag is used to create numbered (ordered) • The <li> tag is used in both to add list items

  8. Headings in HTML (from last time) • Documents tend to have headings, subheadings • HTML provides several levels of heading tags: • <h1> and </h1> level one • <h2> and </h2> level two • … • <h6> and </h6> level six • Headings display content on a new line • Headings are bold and go lower in size as the level number increases.

  9. Customize Your Page • By default, tags will display using browser settings • Default font in Chrome/Firefox: Times New Roman • We can change these settings using style attributes <body style="background-color:blue;"> <p style="color:red"> This will look awful. </p> </body>

  10. Customize Your Page • We can apply the style attribute to any tag • Has the format style="prop1:value; prop2:value;" • Common properties we change are: • background-color • color • font-family • font-size • padding • margin • Important note: style changes impact all elements contained within the element.

  11. Color Styling • color • This changes the font color for the given element • background-color • This changes the background color for the given element • We have many choices for color • red, orange, yellow, blue, black, gray, white (140 color names) • style="color:yellow;" • Color codes: #FF00FF (is magenta) • style="color:#FF00FF;" • Check out UB color scheme

  12. Font Styling • font-family • This changes the font type (like changing font in Word) • Times New Roman, Arial, Courier, Georgia (many more) • style="font-family: Times New Roman;"

  13. Font Styling • font-size • This changes the size of the font • Can be set as a specific size: • 10px (pixels) • style="font-size:10px;" • 16pt (point, same as setting in a text editor) • style="font-size:10pt;" • Can be set as a percentage of parent font size (good for mobile): • 200% is the default for the largest heading h1 • style="font-size:200%;" • 2em – 2 times the parent font size • style="font-size:2em;"

  14. Padding Elements • padding • This generates space around the contents within by moving it away from the edge of the element • style=“padding:12px;“ • margin • This generates space around the element itself • style=“margin:15px;” • Best seen with a border • style=“margin:10px; padding:6px; border-style:solid; border-width:2px; border-color:red;“ • There are a number of style options for borders (see here)

  15. Summary • We have a number of tags that appear in almost every webpage. • http://www.w3schools.com/tags/default.asp has a comprehensive list of html tags • Some basic styling of our tags. • standard color names • UB color scheme • Let’s build something using these tags.

More Related