Showing posts with label box model. Show all posts
Showing posts with label box model. Show all posts

Friday, February 23, 2018

WebDesign: HTML Tags vs. Elements vs. Attributes (W7-P3)


Before we may have used the terms tags and elements synonymously.

However, we can now make a clear distinction among tags, elements and something called attributes.

We can and should make these distinctions when we are using HTML code like the following.

<p class="para1"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </p>
<img class="imagec" src="barracuda.jpg">

The above comes from some HTML code we played with in a recent post.

Read the following and note the definitions and distinctions among tags, elements and attributes.


After reading the page linked to above, we should be above to identify the elements, the tags and the attributes in the above HTML code.  Some questions: How many elements do we have above?  How many attributes are there in the img element?  Does the img element have a closing tag?

Also, based on the code we worked with recently, what is the purpose of the class attribute?  What does the class attribute have to do with the CSS code?  How are they linked?




Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.






Tuesday, February 20, 2018

WebDesign: The Box Model and Web Design (W7-P2)


box model: a web design concept in which "every element on a page is a rectangular box and may have width, height, padding, borders, and margins... There are several properties that determine the size of that box. Each part of the box model corresponds to a CSS property: width, height, padding, border, and margin."

CSS Tutorial for Beginners - 17 - CSS Box Model Part 1


Next parts of video series on box model



Online HTML, CSS & JavaScript Editor


The CSS Desk site can be used to try out the HTML and CSS code.  The HTML and CSS code is in the comments section of each of the videos.  Copy and paste the code in to the CSS Desk site and play around with the code.  Get a good sense of what each line of code does.


Share this post with others. See the Twitter, Facebook and other buttons below.
Please follow, add, friend or subscribe to help support this blog.
See more about me at my web site WilliamHartPhD.com.