1 / 7

Creating Stylish Webpages with HTML: Font, Color, and Image Features

Dive into the essentials of HTML markup for enhancing webpage design in this guide. Explore how to set font features such as text color, style, size, and alignment. Learn to manipulate images with attributes that define height, width, and positioning. Understand the use of tags like `<font>`, `<img>`, and alignment attributes to create visually appealing layouts. This discussion covers practical examples including background colors, styling text, and managing image placements to elevate your web design skills in Computer Science 1611.

halima
Télécharger la présentation

Creating Stylish Webpages with HTML: Font, Color, and Image Features

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. Creating Webpages with Style Hypertext and the HTML Markup Language (continued) Computer Science 1611 Internet & Web

  2. Features for discussion • Font features • Color : color of the text • Face: set the typestyle for text • Size : size of the font • Alignment • Image features • Height, width • Alignment of text • Alternate text • Tables Computer Science 1611 Internet & Web

  3. Font features Color : color of the text • <font color="#ff0000">All this will display as Red</font> • <font color="#0000ff"> All this will display as Blue</font> • <body bgcolor="#0000ff"> or <body bgcolor=“blue"> will set the background color of the “body” to blue Face: set the typestyle for text • <font face="Arial">This will display as Arial</font> Size : size of the font • <font size =“1">All this will be tiny font</font> • <font size="7"> All this will be larger font </font> Computer Science 1611 Internet & Web

  4. More Font features Alignment • <br> means break to the next line • <nobr> means no break, and will not let your text break(this causes the reader to have to scroll to the right) • <p> paragraph text goes here </p> means break two lines for a new paragraph • <center> text to be centered </center> results in text to be centered Computer Science 1611 Internet & Web

  5. Align Tag We can also align the text in a “container” to the left, center or middle using a simple attribute of the • heading <h1></h1> tag • paragraph<p></p> tag To do this we use the following attributes within these tags. • align="center" • align="left" • align="right" Because the alignment is an attribute of a tag, aligns must go inside the main tag they intend to align. Computer Science 1611 Internet & Web

  6. html images • In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. • <img src="url"> • You can use an image as the background for the body • <body background="waterimage.jpg"> Computer Science 1611 Internet & Web

  7. image attributes Attributes which can be assigned to an image include height - the height of the image width - the width of the image align - the horizontal alignment of the image top----------aligns the text with the top of the picture bottom-------aligns text with bottom of picture middle-------aligns the text with the middle of the image right--------aligns image at right margin-text will wrap on the left side of it left---------aligns picture at the left margin- text will wrap on the right of it hspace - the amount of space you want on the sides your picture in pixels vspace - the amount of space you want on the top and bottom (pixels) <img src="http://www.porshiana.com/waterimage.jpg" align= "right" height="300"> Computer Science 1611 Internet & Web

More Related