Waffle Studio Team 6
Simple Explanation about how to insert images, links and lists.
You can insert image with<img>
tag.
<img src="/your/image/path" />
You can insert link with <a>
tag.
<a href="/your/link/path" target="_black"> text </a>
You can insert unordered list with <ul>
and <li>
tag.
<ul>
<li> item 1 </li>
<li> item 2 </li>
<li> item 3 </li>
</ul>
Example
Lion : Hello! I'm Lion. I'm here to give you some references.
References
Lion : Gook Luck with your coding!
Code of The Example
HTML Code
<h2>Example</h2>
<div class="wf-lion-img__wrapper">
<img class="wf-lion-img" src="http://t1.daumcdn.net/liveboard/kakaogame/aa28778de3e24f07826d2885fbde743c.gif"/>
<strong>Lion :</strong> Hello! I'm Lion. I'm here to give you some references.
</div>
<h3>References</h3>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="https://waffle-skile.github.io/lecture/2/" target="_blank">
HTML & CSS Lecture
</a>
</li>
<li class="list-group-item">
<a href="https://waffle-skile.github.io/lecture/1/" target="_blank">
Homework Description
</a>
</li>
<li class="list-group-item">
<a href="https://getbootstrap.com/" target="_blank">
Bootstrap
</a>
</li>
<li class="list-group-item">
<a>
Github Link (will be updated later)
</a>
</li>
</ul>
<div class="wf-lion-img__wrapper">
<img class="wf-lion-img" src="http://upload2.inven.co.kr/upload/2018/08/25/bbs/i14519452171.gif"/>
<strong>Lion :</strong> Gook Luck with your coding!
</div>
CSS Code
.wf-lion-img__wrapper {
margin: 30px 0;
display: inline-block;
text-align: center;
}
.wf-lion-img {
display: block;
margin: 0 auto;
}