-
Notifications
You must be signed in to change notification settings - Fork 0
/
learning.html
177 lines (142 loc) · 3.77 KB
/
learning.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!-- Emmet harika! -->
<!--
+ kardeş öğe
> içinde öğe
^ yukarı çık ve öğe oluştur
* çarp
lorem anlamsız kelimeler
lorem4 4 kelimelik lorem
. class
# id
$ artan sayıları kendi yazar -->
<!-- h1+p+p+p+p+h2+h3 -->
<h1></h1>
<p></p>
<p></p>
<p></p>
<p></p>
<h2></h2>
<h3></h3>
<!-- h1+p*4+h2+h3+p*4 -->
<h1></h1>
<p></p>
<p></p>
<p></p>
<p></p>
<h2></h2>
<h3></h3>
<p></p>
<p></p>
<p></p>
<p></p>
<!-- ul>li*5 -->
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- ul>li*3^p -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<!-- ul>li*3>lorem1^^p*3>lorem2^h2>lorem1 -->
<ul>
<li>Lorem.</li>
<li>Eligendi.</li>
<li>Non.</li>
</ul>
<p>Lorem, ipsum.</p>
<p>Perspiciatis, voluptatibus?</p>
<p>Architecto, enim!</p>
<h2>Lorem.</h2>
<!-- h3.deneme>lorem1 -->
<h3 class="deneme">Lorem.</h3>
<!-- h3#idName>lorem1 -->
<h3 id="idName">Lorem.</h3>
<!-- h3.deneme#idName>lorem1 -->
<h3 class="deneme" id="idName">Lorem.</h3>
<!-- .buDaNe -->
<div class="buDaNe"></div>
<!-- ul>li.tepki -->
<ul>
<li class="tepki"></li>
</ul>
<!-- ul>.tepki -->
<ul>
<li class="tepki"></li>
</ul>
<!-- you will probably use this one as -->
<!-- ul>.text-blue*3>lorem1 -->
<ul>
<li class="text-blue">Lorem.</li>
<li class="text-blue">Reiciendis!</li>
<li class="text-blue">Quasi.</li>
</ul>
<!-- ul>li#idNo$*3 -->
<ul>
<li id="idNo1"></li>
<li id="idNo2"></li>
<li id="idNo3"></li>
</ul>
<!-- picsum.photos random image getirir-->
<a href="https://picsum.photos" target="_blank">
<img src="img.png" alt="kodluyoruz repo" title="repo ss">
</a>
<!-- map ve area
Resimlerinize hyperlink atamanız durumunda resmin tüm alanı link alanı haline dönüşecektir.
Resmin herhangi bir yerine tıklanılması durumunda resim sizi tanımlanan bağlantıya gönderecektir.
<img> etiketleri için kullanılan <map> ve <area> etiketleri ile resmin içindeki koordinatlarla
belirlediğimiz bir alanı sadece link haline getirebiliriz. Eklediğimiz <area> etiketi kadar belirlenen
alanı bir resim üzerinden birçok bağlantıya link verebiliriz.
Örneğin Instagram'da bazı satıcılarda gördüğünüz bir insan fotoğraf üzerinde pantolon ve ayakkabının
ürün linklerini ayrı ayrı vermek isterseniz kullanabilirsiniz. -->
<html>
<body>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
<!-- picture tagi ekran boyutlarına göre birden çok source kulllanmamızı sağlar bu sayede ekran boyutu değiştikçe farklı image'leri kullanabilirsiniz.
Örnek: Burada ekran genişliğinin 800 pikselden küçük olduğu durumlarda başka diğer koşullarda ise başka bir görsel kullanılacak. -->
<picture>
<source srcset="https://cdn.sanity.io/images/9kdepi1d/production/65c832d202a503b15d99e628f4313782f3ef50db-300x62.png" media="(min-width: 800px)">
<img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
</picture>
<!-- başka sayfalara gitmek -->
<ul>
<li>
<a href="https://kodluyoruz.org" target="_blank">
yeni sekmede kodluyoruza gider
</a>
</li>
<li>
<a href="iletisim.html">
iletişim sayfasına gider
</a>
</li>
<li>
<a href="#end">
Scroll to end</a>
</li>
<li>
<a href="mailto:ecembalikci@hotmail.com">
Send mail
</a>
</li>
<li>
<a href="tel:05554442563">
Call
</a>
</li>
</ul>
<h2 id="end">End of the page</h2>
<p>Lorem.</p>