New Post has been published on WebPreg.com
New Post has been published on http://www.webpreg.com/html-css/html-css-online-course/concept-block-convert-blocks.html
Lession 2: Concept "block" and how to convert blocks
1, Problem 1:  Preparing – After DW installed, you go to Site tab on top bar, select New Site… to create new website. You put Site Name, Local Site Folder then Save
- Right click on Site name, click New File, New Folder to creat new file or folder.
- You create ch01 folder for chapter 1, le02 folder for lession 02, 01.html file to practice, css folder to store css file and style.css to practice. Double click on file to open them. Button Code (only show source code), Split (show source code and result), Design (show design view)
- Embed style.css file to 01.html by the way put following <link> tag to inside <head></head> tag:
<link rel="stylesheet" type="text/css" href="css/style.css">
 2, Problem 2: HTML tag groups
- None: This group not show for user the content inside the tag.
- Block: This group show for user the content inside the tag and overfollow full screen browser horizontally.
- Inline:Â This group show for user the content inside the tag and width block depend on length of charactor.
Example:
+Â You put following CSS code to style.css to show result clearly:
/* CSS Document */ p, span border: 1px solid #000; padding: 10px;
+ You press F12 to see result on your browser.
3, Problem 3:  How to convert blocks
- In web design, we somtimes need block tags showed as inline tags gainsay. So how to do?
+ To show block tags as inline tags, you put “float: left;” property or “display: inline;” property to css file.
+ To show inline tags as block tags, you put “display: inline;”.
Now, style.css :
/* CSS Document */ p border: 1px solid #000; padding: 10px; float: left; span border: 1px solid #000; padding: 10px; display: block;
   Waiting for lession 3: Format and the priority
