Introduction to Web Page Design 1 1122022 Objectives
Introduction to Web Page Design 1 1/12/2022
Objectives 2 �Introduce General Tags Tag Structure Explore Tag Types Explore Tag Attributes �Add Attributes/Style to General Tags 1/12/2022
Tag Structure 3 �Most tags has the same structure** <tagname attribute 1="setting 1" attribute 2="setting 2" …> content </tagname> � <tagname attribute 1="setting 1" attribute 2="setting 2" …> 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)
Paragraph Tag 4 <p> This will create a paragraph. </p> <p style="text-indent: 50 px; "> This is another paragraph. This paragraph will be indented. </p> �The <p> tag is used for paragraphs. �A useful style is setting indentation using textindent.
Image Tag 5 � The <img> tag displays an img. � src="…" tells where the image file is located <img src="images/ubcrest. png" alt="UB Crest"> <img src="ublogo. png" alt="UB Logo" style="height: 100; width: 300"> 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) 6 <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
List Tags 7 <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
Headings in HTML (from last time) 8 �Documents tend to have headings, subheadings �HTML provides several levels of heading tags: <h 1> and </h 1> level <h 2> and </h 2> level two … one <h 6> and </h 6> 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 9 �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>
Customize Your Page 10 �We can apply the style attribute to any tag Has the format style="prop 1: value; prop 2: value; " �Common properties we change are: background-color font-family font-size padding margin �Important note: style changes impact all elements contained within the element.
Color Styling 11 �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: #FF 00 FF (is magenta) � style="color: #FF 00 FF; " Check out UB color scheme
Font Styling 12 �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 13 �font-size This changes the size of the font Can be set as a specific size: 10 px (pixels) • style="font-size: 10 px; " 16 pt (point, same as setting in a text editor) • style="font-size: 10 pt; " Can be set as a percentage of parent font size (good for mobile): 200% is the default for the largest heading h 1 • style="font-size: 200%; " 2 em – 2 times the parent font size • style="font-size: 2 em; "
Padding Elements 14 �padding This generates space around the contents within by moving it away from the edge of the element � style=“padding: 12 px; “ �margin This generates space around the element itself � style=“margin: 15 px; ” �Best seen with a border � style=“margin: 10 px; padding: 6 px; border-style: solid; borderwidth: 2 px; border-color: red; “ There a number of style options for borders (see here)
Summary 15 �We have a number of tags that appear in almost every webpage. http: //www. w 3 schools. 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.
- Slides: 15