MỘT SỐ ĐOẠN CODE TRÌNH BÀY TRONG BLOG

Để bài viết hấp dẫn, ngoài nội dung hay thì cách trình bày cũng là một yếu tố vô cùng quan trọng giúp bài viết thêm sinh động hơn

1. chèn khung vào chữ
2. Mô phỏng một phím
3. Note nền vàng
4. Note nền xanh da trời
5. Note nền bạc silver
6. Note nền bạc - codeview
7. Note nền bạc - quote
8. Note nền bạc - loại 2
9. Note nền xanh da trời - loại 2
10. chèn khung có nội dung dưới hình
11. Note Blockquote có hover xanh
12. Nút demo và Download
13. Contoh Penerapan Prism Syntax Highlighter
14. Syntax
15. Chia 2 cột
16. Chữ đầu viết to

1. Chèn khung vào chữ | MENU

<div class="dongkhungchu">######</div>

2. Phím | MENU

Ctrl

<div class="nut" style="width:45px">#####</div>

3. Note nền vàng | MENU

<div class="ghichu">Nội dung</div>

4. Note nền xanh da trời | MENU

<div class="ghichuxanh"> Nội dung </div>

5. Note nền bạc silver | MENU

<div class="ghichusilver"> Nội dung </div>

6. Note nền bạc - codeview | MENU

<div class="codeview"> Nội dung </div>

7. Note nền bạc - quote | MENU

<div class="xemcode"> Nội dung </div>

8. Note nền bạc - loại 2 | MENU

<div class="code"> Nội dung </div>

9. Note nền xanh da trời - loại 2 | MENU

<div class="note"> Nội dung </div>

10. chèn khung có nội dung dưới hình | MENU

Đây là ví dụ có class là "chenhinh"

hướng dẫn:

<center>
<table class="chenhinh">
<tr>
<td>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggXEdQrRcYV49gOpOdR68fW4tU8qf5CNM2EJ_3BXARo5Z11bwrxYDIz5apFt2ZRq43obJIdnp0a99egq1MOGzB3I5cw5_4_RiYi6ijR7HP3_Ii6bTDpTOSLSLP0ysANbUC_gauFxvxbyg/s1600/tuy-chon-dang-bai-viet-qua-email.PNG"/><br>
</td>
</tr>
<tr>
<td style="text-align:center;">
Đây là ví dụ có class là "note"
</td>
</tr>
</table>
</center>

11. Note Blockquote có hover xanh | MENU

<div class="blockquote">#####</div>

12. Nút demo và Download | MENU

đang load mẫu của peajastr (@lengoccuong) on CodePen.

13. Contoh Penerapan Prism Syntax Highlighter | MENU

HTML:

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> 
... kode HTML (yang sudah di`escape`) di sini ...
 </code>
</pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> 
... kode CSS di sini ... 
</code>
</pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> 
... kode JavaScript di sini ... 
</code>
</pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

/* CSS Prism Syntax Highlighter */

pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}

 
<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
 

 
<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

 
<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

14. Syntax | MENU

HTML:

<?php
$example = range(0, 9);
foreach ($example as $value)
{
 echo $value;
}

TUTORIAL:

http://oneqonea.blogspot.com/2012/04/how-do-i-add-syntax-highlighting-to-my.html

15. Chia 2 cột | MENU

DEMO:

Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe

TUTORIAL:

 
.bagidua
{
   -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

 
<div class='bagidua'>Đây là một mẫu của một bài viết chia 2 cột, tôi chỉ ghi linh tinh để làm mẫu cho các bạn thôi, không cần thiết phải đọc đến hết đâu nhé, nếu bạn thích đọc thì cứ tiếp tục đọc vì đây cũng chỉ là một mẫu mà tôi viết ra để cho ai rảnh thì đọc cho vui thôi mà, nếu đã đọc được đến đây rồi thì có thể đọc cho hết cũng không sao, xong đoạn này thì ví dụ này có thế hết được rồi, cõ lẽ đủ dài rồi đó nhỉ. Cảm ơn bạn đã đọc hết hehe.</div>

16. Chữ đầu viết to | MENU

<span class="first-letter">M</span>

.first-letter { float: left; color: #4791d2; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Free Download Preview Purchase Now

Notice

To continue, please switch to your personal account.

39 tình huống sư phạm

Sở GD&ĐT Hà Nội giới thiệu những tình huống sư phạm và cách xử lý thích hợp

*Tình huống 1: Trong giờ học, một nhóm học sinh mất trật tự -> làm thế nào?

=> Cách giải quyết: Tạm ngưng bài giảng, nghiêm nét mặt, hướng mắt về phía có HS mất trật tự, đợi lớp trật tự rồi tiếp tục giảng.

Một số tình huống sư phạm và hướng giải quyết

Trong sự nghiệp giảng dạy của mỗi giáo viên, ai cũng đã từng phải trải qua những tình huống khó xử ở trường lớp, nếu không có kỹ năng sư phạm thì thật khó để xử lý và giải quyết một cách hợp lý. Hãy cùng tham khảo một số tình huống sư phạm và hướng giải quyết.

Kỹ năng sư phạm và một số tình huống sư phạm và hướng giải quyết mà các giáo viên cần biết
Tình huống 1:

Trong lớp bạn chủ nhiệm, có một học sinh làm mất xe đạp đã không giám về nhà vì sợ bố mẹ mắng và đã đến nhà bạn . Bạn biết điều đó và bạn sẽ sử lý thế nào?Giải quyết:

12 mẹo trong nghệ thuật giao tiếp

Trong cuộc sống hằng ngày chúng ta thường xuyên phải giao tiếp với nhiều người, với nhiều đối tượng thuộc các tầng lớp khác nhau. Và chính sự tinh tế, khéo léo trong cách ứng xử với mọi người đã giúp cho chúng ta đạt tới một nghệ thuật, nghệ thuật giao tiếp.

Có thể, bạn rất khéo trong cách nói chuyện nhưng lại rất khó khi bắt đầu, hoặc kết thúc cuộc nói chuyện? Hãy thử làm theo một số mẹo dưới đây để giúp bạn tự tin hơn nhé!
1. Khi bắt đầu một cuộc gặp, cần chuẩn bị một số vấn đề để thảo luận cũng như các câu hỏi có liên quan. Nếu bạn đã từng gặp một người nào từ trước đó, cố gắng nhớ những thông tin về anh ấy, các thói quen, sở thích hoặc bất cứ vấn đề gì liên quan đến cả bạn và anh ta.

Tình huống sư phạm và những lời giải bất ngờ

GD&TĐ - Th.S Nguyễn Thị Mỹ Trang (Trường ĐH Sài Gòn) giới thiệu một địa chỉ vô cùng hữu ích cho bất kỳ nhà giáo nào muốn tham khảo những lời khuyên quanh chuyện dạy học.
Trang web địa chỉ http://www.teachingtipsmachine.com/ hàng tuần gửi đến những độc giả đã đăng ký một bức thư tin, thoạt nhìn tuy đơn giản nhưng nếu khéo áp dụng cho lớp học thì hiệu quả nhất định là trong tầm mắt.

Các bức thư tin luôn khởi đầu bằng một câu hỏi nêu tình huống thường gặp trong lớp, sau đó là gợi dẫn ý chia sẻ kinh nghiệm:
Cho thời gian - giao nhiệm vụ

Tình huống sư phạm thường gặp

TH 1:

Bạn là giáo viên chủ nhiệm của một lớp học, trong lớp của bạn chủ nhiệm  có một học sinh học kém, lại thường xuyên đi học muộn, trong các giờ học lại không chú ý lắng nghe giáo viên giảng bài và thường ngủ gật. Khi bạn đến gặp phụ huyenh của học sinh đó để trao đổi về tình hình học tập của em và muốn phối hợp với gia đình của em nhằm đề ra phương án tốt nhất để cái thiện tình trạng học tập của em thì mẹ của em lại xin cho em thôi học. Lý do mà mẹ của em đưa ra là vì bố em mất sớm, nhà lại còn có  em nhỏ. Nên mẹ của em muốn xin cho em thôi học để giúp đỡ mẹ trong nom em nhỏ, để mẹ em đi kiếm tiền nuôi các con.

          Với cương vị là một giáo viên chủ nhiệm của hcoj sinh đó, thì bạn cần làm gì để giúp đỡ học sinh đó vẫn có thể đi học và vẫn có thể giúp đỡ gia đình được phần nào ?