PPT-BIS1523 – Lecture 3 1 More CSS & HTML, Positioning, Images

Positioning and the Box Model When working on layouts for your HTML web pages it is convenient to think about your content in the terms of being in boxes If you took a simple web page with 4 elements and put a border around each element this becomes easy to visualize. Svetlin. . Nakov. Telerik Web Design Course. html5course.telerik.com. Manager Technical Training. http://nakov.com. . Table of Contents. Positioning. Positioning inline elements. Floating. Left and right. ART340. Floating and Positioning. CSS Methods for breaking out of the . normal flow. and arranging elements on a page.. Floating. moves an element to the left or right, and the following elements wrap around it.. 5. Introduction to CSS. CSS Display - Block and Inline . Elements. A block element is an element that takes up the full width available, and has a line break before and after it. .. Examples: <h1>, <p>, <li>, <div>. Images on the Web. Pictures. Page backgrounds. Element backgrounds (list items!). Link displays (arrows). List markers. Formats and Fidelity. Many Formats. j. peg or jpg, . png. , . tif. , gif, …. Different encodings, different sizes but they all will work. Advanced CSS. Making . E. lements Float. You can make elements float within text or other elements with the . float. CSS property. . This causes the text to wrap around the images. . Without floating, an image and paragraph looks like:. ADOPTED BY RIM. . FOR. . 1. A BRIEF INTRO OF BlackBerry…. BlackBerry is a line of wireless handheld device developed by the Canadian company, Research In Motion (RIM).. 1999 – Introduced a two-way pager. What is the . innerHTML. of ‘cat’?. <. ol. id = “list1”>. <li id = “. first”> zombies . </li>. <li id=“. second”> vampires . </li>. </. ol. >. What is the . Slide . 1. Introduction. There are several good reasons for taking . CS142: Web Applications. :. You will learn a variety of interesting concepts.. It may inspire you to change the way software is developed.. Mathematical Operators. The following mathematical operators may be used in PHP to perform calculations:. . : addition. -. : subtraction. *. : multiplication. /. : division. **. : exponentiation. Images.ppt. Images You can add images that have been downloaded to the images folder or link to an image on a webpage. . This is the Image tag to insert an image that is located in the images folder. . The <. img. > Element. To add an image to a webpage, you need the <. img. > element. The <. img. > element is an empty element, which means there is no closing tag. All <. img. > elements should contain attributes describing the image. The <. img. > Element. To add an image to a webpage, you need the <. img. > element. The <. img. > element is an empty element, which means there is no closing tag. All <. img. > elements should contain attributes describing the image. 3. 01. 02. 03. 04. 05. 06. Continue . learning HTML. Revise . HTML Structure. Adding images. Linking Pages. Adding Tables. Adding Color. 1 Minute Strategy. Build up the HTML sweet home Structure using the HTML main blocks within one minute?. Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times..