User:Wonghk3/Sandbox/WikiTextDa4

From FamilySearch Wiki
Jump to navigation Jump to search


WIKITEXT (BASIC): DAY-4[edit | edit source]

CH-22: DIV TAG - INTRO[edit | edit source]

FOLLOW samples on tutorial page... Div Tag-Intro

SO WE LEARNED: To separate paragraphs, we can use spaces [enterkey], page breaks <br> or P-tags <p>{PP}</p>:

  • neither spaces nor page breaks allows us to add attributes
  • P-tags do allow for attributes and it automatically puts a space between paragraphs
  • What if we want to use attributes and want to control the spacing between the paragraphs?

TO DEMO:

SHOW ME: using <br>

1. copy Lorem Ipsum... two times, back-to-back, making bold the Lorem Ipsum
2. enter <br> between first PP and second PP, then show preview
3. RESULTS: Paragraph breaks WITHOUT space between them

SHOW ME: using P-tags (contains built-in spacing between paragraphs)

4. copy Lorem Ipsum... two times again, back-to-back
5. place first and second PP between P-tags

6. add to first PP

<p style="background-color:lightgreen">{Lorem...}</p>

and to second PP

<p style="background-color:lightgray">{Lorem...}</p>

then show preview

7. RESULTS: Note space between paragraphs; so, how do we get rid of that spacing?

SHOW ME: using DIV-tags <div>{PP}</div> (allows for attributes without the built-in spacing between paragraphs)

8. copy Lorem Ipsum PP with P-tags to third section and replace P-tags with div-tags, then show preview
9. RESULTS: Note no space between paragraphs

NOTE: space still between p-tag paragraphs, but not for div-tag paragraphs
Furthermore, div-tags give us more control over spacing between paragraphs and we can still use all the attributes we have learned so far



CH-23: BORDERS[edit | edit source]

FOLLOW samples on tutorial page... Borders

CODING FORMAT[edit | edit source]

The BORDER ATTRIBUTE is made up of PROPERTY=border and VALUE=(thickness in px)space(type of border)space(line color)

border:1px solid red

WHAT SIDE TO PLACE A BORDER[edit | edit source]

border-top, border-right, border-bottom, border-left

KINDS OF BORDERS[edit | edit source]

Type of Borders

SHOW ME: border:10px groove violet
GROOVE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.
SHOW ME: border:15px ridge lightgray
RIDGE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

PADDING AND MARGINS IN BORDERS[edit | edit source]

Padding and margin attributes work the same way with borders.

TO DEMO:

Add borders to the paragraphs from previous chapters and show preview



BORDER RADIUS[edit | edit source]

HOW TO ROUND CORNERS on square boxes (default value)

border-radius:5px

The BORDER RADIUS ATTRIBUTE is made up of PROPERTY=border-radius and VALUE=thickness in px
Using limited corner rounding:

border-top-left-radius:5px
border-bottom-left-radius:5px
border-top-right-radius:5px
border-bottom-right-radius:5px




BORDER SHADOWS[edit | edit source]

3D shadow effect for boxes
The BOX SHADOW ATTRIBUTE is made up of PROPERTY=box-shadow; and

VALUE=right edge to shadow edge, in px(space)bottom edge to shadow edge, in px(space)distance box is above page(space)color of shadow
Note: bigger the third or distance value, the fuzzier the shadow
"box-shadow:10px 10px 5px red"


EFFECT OF BORDERS ON PAGE (width of element)[edit | edit source]

.....TO BE COVERED WITH LESSON ON WIDTH AND HEIGHT.....


When a border attribute is added to a div tag, must watch out that the content + border width does not exceed actual page width.



CH-24: PADDING[edit | edit source]

FOLLOW samples on tutorial page... Padding

PARAGRAPH WITH NO PADDING[edit | edit source]

<p style="background-color:dodgerblue;color:white>{Paragraph}</p>

TO DEMO:

1. Clear previous lesson's sandbox screen
2. Copy the code from the box above and the Lorem Ipsum PP from Univ page on Padding, then show preview
3. Note: code has no space betw text and border --> rests up against the left border
4. place a space betw text and border, then show preview --> Note: box around text
5. Sooooo... how can we place a space betw text and border?

ADD PADDING ATTRIBUTE (creates spaces INSIDE of the BORDER)[edit | edit source]

6. We add a PADDING using the Attribute: PROPERTY=padding and VALUE=size in px

<p style="background-color:dodgerblue;color:white; padding:10px">{Paragraph}


HOW TO LIMIT PADDING SIDES (examples below:left, top&bottom, right)[edit | edit source]

<p style="background-color:dodgerblue;color:white;padding-left:50px">{PP}</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<p style="background-color:limegreen;color:white;padding-top:30px;padding-bottom:30px">{PP}</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.

<p style="background-color:pink;color:black;padding-bottom:100px">{PP}</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet iaculis metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce elementum efficitur faucibus. Curabitur eleifend quis ligula ac ullamcorper. Curabitur eget suscipit turpis.



CH-25: MARGINS[edit | edit source]

FOLLOW samples on tutorial page... Margins

RECALL: The PADDING attribute is used to build space INSIDE of the BORDERS.

The MARGIN attribute is used to build space OUTSIDE of the BORDERS.

<p style="margin:20px">{Paragraph}</p>

TO DEMO:

1. copy the Lorem ipsum... paragraphs from the previous chapter DEMO
2. change the word 'padding' to 'margin' in the DIV-tag
3. press show preview
4. NOTE difference:

a. paragraph words are up against the boarder
b. the 20px margin wraps around the first PP but is in white as it is outside the border
c. the second PP is indented by 300px (outside the border) with the words up against the border (on the inside)
d. text changes to compensate for change in space

5. copy the Lorem ipsum... paragraph from step 2 to one or two lines further down the page
6. make margin in second PP same as first PP

e. the space between the two represents the margin around each; margin overlaps, does not combine to 40px