Introduction to Web Page Design 9/18/2018
Objectives Introduce General Tags Add Attributes/Style to General Tags Tag Structure Explore Tag Types Explore Tag Attributes Add Attributes/Style to General Tags 9/18/2018
Tag Structure Most tags has the same structure** <tagname attribute1="setting1" attribute2="setting2" …> content </tagname> The is the opening portion of the tag Content that is displayed within the tag (sometimes optional) The is closes the tag **(only first part needed for some tags)
Paragraph Tag The <p> tag is used for paragraphs. <p> This will create a paragraph. </p> <p style="text-indent: 50px;"> This is another paragraph. This paragraph will be indented. The <p> tag is used for paragraphs. A useful style is setting indentation using text-indent. Style is a special type of attribute in a tag with a wide array of uses.
Image Tag The <img> tag displays an img. <img src="images/ubcrest.png" alt="UB Crest"> <img src="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
Anchor Tag (links) The <a> tag is used to display hyperlinks. <a href="http://www. buffalo.edu/"> UB Homepage </a> <a href="https://www.cse.buffalo.edu/" target="_blank"> CSE Department Homepage 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
List Tags <ul> <li>HTML</li> <li>head</li> <li>body</li> </ul> <li>CSS</li> <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
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.
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> Font color is Times New Roman, color black and size 16.
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. Default font is Times New Roman, color black, and size 16.
Color Styling color background-color We have many choices for 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
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;"
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;"
Padding Elements padding margin Best seen with a border 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)
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.